Bootstrap - Carousel

Bootstrap 5’s Carousel component is a versatile and easy-to-use slideshow feature that lets you cycle through images, text, and other content smoothly. Carousels are popular for highlighting content, adding an engaging visual to a page, and creating image galleries.

In this guide, we’ll explore the Bootstrap Carousel and how to customize it.

1. Basic Carousel Structure

A basic Bootstrap Carousel requires only a few elements: the carousel wrapper, items, and indicators for navigation.

Basic Example

</div>

</div>

</div>

<span class="visually-hidden">Previous</span>

</button>

</button>

</div>

In this example:

carousel slide: The main carousel wrapper class.

carousel-inner: Contains all carousel items.

carousel-item: Each individual slide.

carousel-control-prev and carousel-control-next: Controls to navigate between slides.

2. Adding Carousel Indicators

Indicators are small dots at the bottom of the carousel that show the current slide position and allow users to jump to a specific slide.

Example with Indicators

</div>

</div>

</div>

In this example:

carousel-indicators: Creates the clickable dots.

Each <button> inside represents an indicator for a specific slide, with data-bs-slide-to referencing the slide number (0-indexed).

3. Adding Captions to Slides

You can add captions to each slide by placing text within a .carousel-caption element.

Example with Captions

<h5>First Slide</h5>

<p>Some representative placeholder content for the first slide.</p>

</div>

<h5>Second Slide</h5>

<p>Some representative placeholder content for the second slide.</p>

</div>

<h5>Third Slide</h5>

<p>Some representative placeholder content for the third slide.</p>

</div>

</div>

carousel-caption: Adds captions to a slide. Use d-none d-md-block to hide captions on smaller screens.

4. Customizing Carousel Transition Timing

Bootstrap Carousels auto-slide by default. To adjust the timing, use the data-bs-interval attribute on each .carousel-item.

Example of Custom Interval

</div>

</div>

data-bs-interval: Specifies the interval in milliseconds for each slide (2000ms = 2 seconds).

5. Pausing and Stopping the Carousel

You can pause the carousel from sliding automatically by setting data-bs-ride="carousel" to data-bs-ride="false". You can also manually control this behavior with JavaScript.

Pausing Carousel Example

</div>

JavaScript Control

To control the carousel via JavaScript:

var myCarousel = document.querySelector('#carouselExample');

var carousel = new bootstrap.Carousel(myCarousel, {

interval: 3000, // 3 seconds

pause: 'hover' // Pause on hover

});

6. Dark Background Carousel

To improve readability, you can apply a dark overlay background by using CSS or adding a dark image overlay.

.carousel-item img {

filter: brightness(0.6);

}

This will darken images, enhancing the visibility of captions or text overlays.

7. Carousel with Multi-Item Display

Although Bootstrap's Carousel displays one item by default, you can customize it to show multiple items at once with some CSS and flexbox.

Multi-Item Carousel Example

</div>

</div>

</div>

</div>

Each .carousel-item has multiple images within a row, each within its own column.

Conclusion

Bootstrap 5’s Carousel provides a feature-rich and customizable solution for adding slideshows and image galleries to your website. By customizing slide intervals, adding captions, or adjusting carousel items, you can create a dynamic and interactive experience that captures users’ attention and enhances your site’s aesthetics.