Carousel
Slides Only#
Here’s a carousel with slides only. Note
the presence of the
.d-block and
.img-fluid 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/small/img-2.jpg" class="d-block w-100" alt="img-2">
</div>
<div class="carousel-item">
<img src="assets/images/small/img-3.jpg" class="d-block w-100" alt="img-3">
</div>
<div class="carousel-item">
<img src="assets/images/small/img-4.jpg" class="d-block w-100" alt="img-4">
</div>
</div>
</div>
With Controls #
Adding in the previous and next controls:
<!-- With Controls -->
<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="assets/images/small/img-4.jpg" class="d-block w-100" alt="img-4">
</div>
<div class="carousel-item">
<img src="assets/images/small/img-2.jpg" class="d-block w-100" alt="img-2">
</div>
<div class="carousel-item">
<img src="assets/images/small/img-3.jpg" class="d-block w-100" alt="img-3">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" 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="#carouselExampleControls" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
With Indicators #
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">
<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-5.jpg" class="d-block w-100" alt="img-5">
</div>
<div class="carousel-item">
<img src="assets/images/small/img-6.jpg" class="d-block w-100" alt="img-6">
</div>
<div class="carousel-item">
<img src="assets/images/small/img-7.jpg" class="d-block w-100" alt="img-7">
</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>
With Captions #
Add captions to your slides easily with
the
.carousel-caption element
within any .carousel-item.
They can be easily hidden on smaller
viewports, as shown below, with optional
display utilities. We hide them
initially with .d-none and
bring them back on medium-sized devices
with .d-md-block.
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.
<!-- With Caption -->
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="assets/images/small/img-6.jpg" class="d-block w-100" alt="img-6">
<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-7.jpg" class="d-block w-100" alt="img-7">
<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-5.jpg" class="d-block w-100" alt="img-5">
<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>
Crossfade #
Add .carousel-fade to your
carousel to animate slides with a fade
transition instead of a slide. Depending
on your carousel content (e.g., text
only slides), you may want to add
.bg-body or some custom CSS
to the .carousel-items for
proper crossfading.
<!-- 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/small/img-1.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="assets/images/small/img-2.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="assets/images/small/img-3.jpg" class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleFade" 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="#carouselExampleFade" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
Individual
.carousel-item interval
#
Add data-bs-interval="" to
a .carousel-item to change
the amount of time to delay between
automatically cycling to the next item.
<!-- Individual carousel-item interval -->
<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/small/img-1.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item" data-bs-interval="2000">
<img src="assets/images/small/img-2.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="assets/images/small/img-3.jpg" class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleInterval" 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="#carouselExampleInterval" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
Disable touch swiping
.carousel-item interval
#
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
so it doesn’t autoplay.
<div id="carouselExampleControlsNoTouching" class="carousel slide" data-bs-touch="false">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="assets/images/small/img-4.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="assets/images/small/img-5.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="assets/images/small/img-6.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>
Dark Variant
.carousel-item interval
#
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.
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.
<!-- Dark Variant -->
<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="assets/images/small/img-8.jpg" class="d-block w-100" alt="...">
<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" data-bs-interval="2000">
<img src="assets/images/small/img-9.jpg" class="d-block w-100" alt="...">
<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="...">
<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="#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>