A slideshow component for cycling through elements—images or slides of text—like a carousel.
Here’s a carousel with slides only. Note the presence of the .d-block
and .w-100
on carousel images to prevent browser default image
alignment.
<!-- Slides only -->
<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="../assets/images/blog/blog-img-1.jpg" class="d-block w-100 " alt="...">
</div>
<div class="carousel-item">
<img src="../assets/images/blog/blog-img-1.jpg" class="d-block w-100 " alt="...">
</div>
<div class="carousel-item">
<img src="../assets/images/blog/blog-img-1.jpg" class="d-block w-100 " alt="...">
</div>
</div>
</div>
Adding in the previous and next controls:
<!-- With Control -->
<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="../assets/images/blog/blog-img-1.jpg" class="d-block w-100 " alt="...">
</div>
<div class="carousel-item">
<img src="../assets/images/blog/blog-img-1.jpg" class="d-block w-100 " alt="...">
</div>
<div class="carousel-item">
<img src="../assets/images/blog/blog-img-1.jpg" class="d-block w-100 " alt="...">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
You can also add the indicators to the carousel, alongside the controls, too.
<!-- With Indicators -->
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
<ol class="carousel-indicators">
<li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active"></li>
<li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"></li>
<li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="../assets/images/blog/blog-img-1.jpg" class="d-block w-100 " alt="...">
</div>
<div class="carousel-item">
<img src="../assets/images/blog/blog-img-1.jpg" class="d-block w-100 " alt="...">
</div>
<div class="carousel-item">
<img src="../assets/images/blog/blog-img-1.jpg" class="d-block w-100 " alt="...">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Add .carousel-fade
to your carousel to animate slides with a fade transition instead of a slide.
<!-- Crossfade -->
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="../assets/images/blog/blog-img-1.jpg" class="d-block w-100 " alt="...">
</div>
<div class="carousel-item">
<img src="../assets/images/blog/blog-img-1.jpg" class="d-block w-100 " alt="...">
</div>
<div class="carousel-item">
<img src="../assets/images/blog/blog-img-1.jpg" class="d-block w-100 " alt="...">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleFade" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Add data-bs-interval=""
to a .carousel-item
to change the amount of time to delay between automatically cycling to the next item.
<!-- Individual -->
<div id="carouselExampleInterval" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active" data-bs-interval="10000">
<img src="../assets/images/blog/blog-img-1.jpg" class="d-block w-100 " alt="...">
</div>
<div class="carousel-item" data-bs-interval="2000">
<img src="../assets/images/blog/blog-img-1.jpg" class="d-block w-100 " alt="...">
</div>
<div class="carousel-item">
<img src="../assets/images/blog/blog-img-1.jpg" class="d-block w-100 " alt="...">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleInterval" role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleInterval" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Carousels support swiping left/right on touchscreen devices to move between slides. This can be disabled using the data-bs-touch
attribute. The example below also does not include the data-bs-ride
attribute and has data-bs-interval="false"
so it doesn’t autoplay.
<!-- Disable touch swiping -->
<div id="carouselExampleControlsNoTouching" class="carousel slide" data-bs-touch="false" data-bs-interval="false">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="../assets/images/blog/blog-img-1.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="../assets/images/blog/blog-img-1.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="../assets/images/blog/blog-img-1.jpg" class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControlsNoTouching" 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="#carouselExampleControlsNoTouching" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
Add .carousel-dark
to the .carousel
for darker controls, indicators, and captions. Controls have been inverted from their default white fill with the filter
CSS property. Captions
and controls have additional Sass variables that customize the color
and background-color
.
<!-- Dark varient -->
<div id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active" data-bs-interval="10000">
<img src="..." class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h3>First slide label</h3>
<p>Some representative placeholder content for the first slide.</p>
</div>
</div>
<div class="carousel-item" data-bs-interval="2000">
<img src="..." class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h3>Second slide label</h3>
<p>Some representative placeholder content for the second slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h3>Third slide label</h3>
<p>Some representative placeholder content for the third slide.</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleDark" 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="#carouselExampleDark" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>