##### Amara Evans

amara@example.com

Pro

### Upgrade to Pro

Get access to all features

- Advanced Analytics
- Team Collaboration
- API Access

Upgrade Now
Upgrade to Pro
Log Out

# Carousel

A carousel is a dynamic slideshow component that cycles through elements, perfect for showcasing featured content, product highlights, or important announcements. With support for images, captions, and multiple transition styles, carousels offer an engaging way to present sequential content to users.

### 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.

Basic Carousel
Loading...
Basic Carousel
Loading...

### 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.

Carousel with Indicators
Loading...
Carousel with Indicators
Loading...

### 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.

Carousel with Captions
Loading...
Carousel with Captions
Loading...

### 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.

Carousel with Crossfade
Loading...
Carousel with Crossfade
Loading...

### 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.

Autoplaying Carousel
Loading...
Autoplaying Carousel
Loading...

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.

User-Triggered Carousel
Loading...
User-Triggered Carousel
Loading...

### 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.

Individual Slide Intervals
Loading...
Individual Slide Intervals
Loading...

### 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.

Autoplay Without Controls
Loading...
Autoplay Without Controls
Loading...

### 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.

Disable Touch Swiping
Loading...
Disable Touch Swiping
Loading...
`ESC`

###### Quick Links

###### Dashboard

Analytics Overview

###### Profile

View your profile

###### Settings

Manage preferences

###### Help Center

Get support

###### Recent Searches

Analytics Dashboard User Settings Email Templates