English
Spanish
French
German
Chinese
Arabic
Carousel
Carousel Only
Create a default carousel using Bootstrap's .carousel class. Use <div class="carousel slide"> to set up the carousel, and include <div class="carousel-inner"> with <div class="carousel-item"> elements for each slide.
<div id="carousel_only" class="carousel slide" data-bs-ride="carousel" data-bs-interval="4000">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="assets/images/small/img-2.jpg" class="d-block w-100" alt="Product 1">
</div>
<div class="carousel-item">
<img src="assets/images/small/img-3.jpg" class="d-block w-100" alt="Product 2">
</div>
<div class="carousel-item">
<img src="assets/images/small/img-1.jpg" class="d-block w-100" alt="Product 3">
</div>
</div>
</div>With Controls
Add navigation controls to a Bootstrap carousel by including <button class="carousel-control-prev"> and <button class="carousel-control-next"> elements. These controls allow users to move between slides in the carousel.
<div id="with_controls" class="carousel slide" data-bs-ride="carousel" data-bs-interval="4000">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="assets/images/small/img-4.jpg" class="d-block w-100" alt="Product 1">
</div>
<div class="carousel-item">
<img src="assets/images/small/img-5.jpg" class="d-block w-100" alt="Product 2">
</div>
<div class="carousel-item">
<img src="assets/images/small/img-6.jpg" class="d-block w-100" alt="Product 3">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#with_controls" 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="#with_controls" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>With default Indicators
Add default indicators to a Bootstrap carousel by including <ol class="carousel-indicators"> with <li data-bs-target="#carouselExample" data-bs-slide-to="0"> elements for each slide. These indicators provide visual navigation for users.
<div class="carousel slide" id="carouselExampleIndicators" data-bs-ride="carousel" data-bs-interval="4000">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="assets/images/small/img-7.jpg" class="d-block w-100" alt="Product 1">
</div>
<div class="carousel-item">
<img src="assets/images/small/img-8.jpg" class="d-block w-100" alt="Product 2">
</div>
<div class="carousel-item">
<img src="assets/images/small/img-9.jpg" class="d-block w-100" alt="Product 3">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" 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="#carouselExampleIndicators" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>Crossfade Animation
Enable crossfade animation in a Bootstrap carousel by adding the .carousel-fade class to the <div class="carousel slide">. This creates a smooth fade transition between slides.
<div class="carousel slide carousel-fade" id="carousel-fade" data-bs-ride="carousel" data-bs-interval="4000">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carousel-fade" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carousel-fade" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carousel-fade" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="assets/images/small/img-10.jpg" class="d-block w-100" alt="Product 1">
</div>
<div class="carousel-item">
<img src="assets/images/small/img-11.jpg" class="d-block w-100" alt="Product 2">
</div>
<div class="carousel-item">
<img src="assets/images/small/img-12.jpg" class="d-block w-100" alt="Product 3">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carousel-fade" 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="#carousel-fade" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>Dots Indicators
Use custom dots for carousel indicators by adding <div class="carousel-indicators-dots"> with your desired dot styles. Replace the default <ol class="carousel-indicators"> with your custom dots to style carousel navigation.
Bullet Indicators
Customize carousel indicators with bullet styles by using <ul class="carousel-indicators-bullet"> instead of the default <ol class="carousel-indicators">. Style each <li> to create unique bullet indicators for your carousel.
With Captions
Add captions to Bootstrap carousel slides by including <div class="carousel-caption"> inside each <div class="carousel-item">. Place your caption text within this container to provide additional information on each slide.
First slide label
Some representative placeholder content for the first slide.
Second slide label
Some representative placeholder content for the second slide.
Third slide label
Some representative placeholder content for the third slide.
<div class="carousel slide" id="carouselExampleCaptions">
<div class="carousel-indicators carousel-indicators-bullet carousel-indicators-warning">
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="assets/images/small/img-5.jpg" class="d-block w-100" alt="Product 1">
<div class="carousel-caption d-none d-md-block">
<h5 class="text-white">First slide label</h5>
<p>Some representative placeholder content for the first slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="assets/images/small/img-6.jpg" class="d-block w-100" alt="Product 2">
<div class="carousel-caption d-none d-md-block">
<h5 class="text-white">Second slide label</h5>
<p>Some representative placeholder content for the second slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="assets/images/small/img-7.jpg" class="d-block w-100" alt="Product 3">
<div class="carousel-caption d-none d-md-block">
<h5 class="text-white">Third slide label</h5>
<p>Some representative placeholder content for the third slide.</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" 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="#carouselExampleCaptions" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>Dark variant carousel
Create a dark variant of a Bootstrap carousel by adding the .carousel-dark class to the <div class="carousel slide">. This adjusts the carousel's text and controls for better visibility on dark backgrounds.
First slide label
Some representative placeholder content for the first slide.
Second slide label
Some representative placeholder content for the second slide.
Third slide label
Some representative placeholder content for the third slide.
<div class="carousel slide carousel-dark" id="dark_variant">
<div class="carousel-indicators carousel-indicators-bullet carousel-indicators-warning">
<button type="button" data-bs-target="#dark_variant" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#dark_variant" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#dark_variant" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="assets/images/small/img-8.jpg" class="d-block w-100" alt="Product 1">
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>Some representative placeholder content for the first slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="assets/images/small/img-9.jpg" class="d-block w-100" alt="Product 2">
<div class="carousel-caption d-none d-md-block">
<h5>Second slide label</h5>
<p>Some representative placeholder content for the second slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="assets/images/small/img-10.jpg" class="d-block w-100" alt="Product 3">
<div class="carousel-caption d-none d-md-block">
<h5>Third slide label</h5>
<p>Some representative placeholder content for the third slide.</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#dark_variant" 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="#dark_variant" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>