Bootstrap Carousel

A carousel is a slideshow of images or content. It has previous and next buttons, small indicators and it can change slides by itself.

A carousel with controls and indicators

<div id="carouselExample" class="carousel slide" style="max-width:500px">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExample" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExample" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExample" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="images/photo.jpg" class="d-block w-100" alt="First slide">
      <div class="carousel-caption d-none d-md-block"><h5>First slide</h5><p>Caption for the first slide.</p></div>
    </div>
    <div class="carousel-item">
      <img src="images/photo.jpg" class="d-block w-100" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img src="images/photo.jpg" class="d-block w-100" alt="Third slide">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

Click the arrows in the preview. We test the next button and the indicators in real Chrome:

const car = document.getElementById('carouselExample');
const index = () => [...car.querySelectorAll('.carousel-item')].findIndex(i => i.classList.contains('active')) + 1;
console.log('active slide at the start: ' + index());

car.querySelector('.carousel-control-next').click();
await new Promise(r => setTimeout(r, 900));
console.log('after Next: ' + index());

car.querySelector('[data-bs-slide-to="2"]').click();
await new Promise(r => setTimeout(r, 900));
console.log('after the indicator 3: ' + index());

car.querySelector('.carousel-control-prev').click();
await new Promise(r => setTimeout(r, 900));
console.log('after Previous: ' + index());

Important classes and attributes

Part	Meaning
.carousel.slide	The wrapper, with the slide animation
.carousel-inner, .carousel-item	The slides. One slide must have .active
data-bs-slide="prev" and "next"	Control buttons
data-bs-slide-to="n"	Indicators (the number starts at 0)
.carousel-caption	Text over the image
.carousel-fade	Fade instead of slide

Autoplay

Add data-bs-ride="carousel" to start the carousel when the page loads. Use data-bs-interval="3000" on a slide for a different time in milliseconds. The slideshow stops when the mouse is over it (data-bs-pause="hover").

<div id="auto" class="carousel slide carousel-fade" data-bs-ride="carousel">
  ...
</div>

For people who do not like moving things, the autoplay is stopped if their system has “reduce motion” on. Do not use autoplay for important content.

JavaScript

const carousel = bootstrap.Carousel.getOrCreateInstance('#carouselExample');

carousel.next();
carousel.prev();
carousel.to(2);
carousel.pause();
carousel.cycle();

Tips

• Use images of the same size to avoid a jump in the height.
• Give every image a good alt text, and keep .visually-hidden texts in the controls.
• On the dark images, you can use data-bs-theme="dark" on the carousel for dark controls. (The old .carousel-dark is deprecated.)

• Previous Page
• Next Page

---

Exercises & Assignments
No Content Found.

Interview Questions & Answers
No Content Found.