Carousel

Basic Example

The basic carousel features a simple slideshow with navigation controls. It includes multiple slides within the carousel-inner container and navigation buttons for manual control. The first slide is marked as active to indicate the starting position.

Indicators

Add slide indicators to your carousel using the carousel-indicators class. These clickable indicators show the current slide position and allow direct navigation to specific slides. Each indicator corresponds to a slide in the sequence.

Captions

Enhance your carousel slides with descriptive captions using the carousel-caption class. Captions can include headings, paragraphs, and other text content to provide context for each slide. They're hidden on mobile devices by default using the d-none d-md-block classes.

Crossfade

Create smooth transitions between slides using the crossfade effect. Add the carousel-fade class alongside carousel slide to enable this elegant transition style. Instead of sliding horizontally, slides will fade in and out.

Autoplaying Carousels

Enable automatic cycling through slides by adding data-bs-ride="carousel". This creates a hands-free slideshow that begins cycling automatically when the page loads. Users can still interact with the navigation controls to manually advance slides.

For user-triggered carousels, use data-bs-ride="true". This option starts the carousel cycling only after the first user interaction, providing a more controlled experience.

Individual Slide Intervals

Customize the display duration for individual slides using the data-bs-interval attribute. Set different time intervals (in milliseconds) for each slide to control how long they remain visible before transitioning to the next slide.

Autoplaying Without Controls

Create a simplified carousel that automatically cycles through slides without navigation controls. This version is ideal for displaying content in a continuous loop where user interaction isn't needed or desired.

Disable Touch Swiping

Disable touch-based navigation by adding data-bs-touch="false" to the carousel. This prevents users from swiping between slides on touch-enabled devices, limiting navigation to the control buttons only.