Bootstrap 5 Carousel Slider Multiple Items
Bootstrap 5 carousel slider with multiple items. The Bootstrap carousel autoplay example with caption content, previous & next arrow, and carousel slide indicators.
See More
Add HTML
<div id="CarouselSlider" class="carousel carousel-dark slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#CarouselSlider" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#CarouselSlider" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#CarouselSlider" data-bs-slide-to="2" aria-label="Slide 3"></button>
<button type="button" data-bs-target="#CarouselSlider" data-bs-slide-to="3" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active" data-bs-interval="10000">
<img src="images/carousel-img-one.jpg" class="d-block w-100" alt="Carousel One">
<div class="carousel-caption text-white d-none d-md-block col-6">
<h3 class="fs-1">Where does it come from?</h3>
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.</p>
<a href="#" class="btn btn-warning mt-3">Learn More</a>
</div>
</div>
<div class="carousel-item" data-bs-interval="2000">
<img src="images/carousel-img-two.jpg" class="d-block w-100" alt="Carousel Two">
<div class="carousel-caption text-white d-none d-md-block col-6">
<h3 class="fs-1">Where can I get some?</h3>
<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words.</p>
<a href="#" class="btn btn-warning mt-3">Learn More</a>
</div>
</div>
<div class="carousel-item">
<img src="images/carousel-img-three.jpg" class="d-block w-100" alt="Carousel Three">
<div class="carousel-caption text-white d-none d-md-block col-6">
<h3 class="fs-1">Why do we use it?</h3>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum.</p>
<a href="#" class="btn btn-warning mt-3">Learn More</a>
</div>
</div>
<div class="carousel-item">
<img src="images/carousel-img-two.jpg" class="d-block w-100" alt="Carousel Three">
<div class="carousel-caption text-white d-none d-md-block col-6">
<h3 class="fs-1">Why do we use it?</h3>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum.</p>
<a href="#" class="btn btn-warning mt-3">Learn More</a>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#CarouselSlider" 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="#CarouselSlider" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>Add CSS
#CarouselSlider {
max-height: 100vh;
overflow: hidden;
}
.carousel-caption {
right: initial;
top: 35%;
bottom: initial;
padding-bottom: 1.25rem;
text-align: left;
}
.carousel-caption {
background-color: rgb(0 0 0 / 22%);
padding: 20px;
border-radius: 10px;
}