About Lesson
Carousel with Different Slide Transitions
- .carousel-fade → Enables fade transition
Example: Fade Effect Carousel
HTML
<div id="carouselFade" class="carousel slide carousel-fade" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="image1.jpg" class="d-block w-100" alt="Slide 1">
</div>
<div class="carousel-item">
<img src="image2.jpg" class="d-block w-100" alt="Slide 2">
</div>
</div>
</div>
Explanation:
- .carousel-fade changes slides with a fade animation instead of sliding.