About Lesson
Controlling Carousel Behavior
- data-bs-ride=”carousel” → Enables automatic sliding
- data-bs-interval=”3000″ → Slide duration (in ms)
- data-bs-pause=”hover” → Stops sliding when hovered
Example: Autoplay & Pause on Hover
HTML
<div id="carouselAuto" class="carousel slide" data-bs-ride="carousel" data-bs-interval="2000" data-bs-pause="hover">
<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:
- data-bs-interval=”2000″ changes slides every 2 seconds.
- data-bs-pause=”hover” stops auto-slide on mouse hover.