This Bootstrap 5 code snippet helps you to create a carousel with multiple items and indicators. It adjusts item display based on screen size. It helps in showcasing multiple items in a carousel with navigation indicators.
You can integrate this carousel into your website to display products, portfolio items, or image galleries. It enhances user experience by allowing easy navigation through multiple items with clear indicators.
How to Create Bootstrap 5 Carousel Multiple Items With Indicators
1. First, ensure you have Bootstrap 5 included in your project. You can link to it via a CDN or download it and include it locally.
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css'>
2. Create the HTML structure for your carousel. Include the necessary classes for Bootstrap carousel and indicators.
<div class="container text-center my-3">
<div class="row mx-auto my-auto justify-content-center">
<div id="recipeCarousel" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<div class="col-md-3">
<div class="card">
<div class="card-img">
<img src="https://via.placeholder.com/700x500.png/CB997E/333333?text=1" class="img-fluid">
</div>
<div class="card-img-overlay">Slide 1</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-3">
<div class="card">
<div class="card-img">
<img src="https://via.placeholder.com/700x500.png/DDBEA9/333333?text=2" class="img-fluid">
</div>
<div class="card-img-overlay">Slide 2</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-3">
<div class="card">
<div class="card-img">
<img src="https://via.placeholder.com/700x500.png/FFE8D6/333333?text=3" class="img-fluid">
</div>
<div class="card-img-overlay">Slide 3</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-3">
<div class="card">
<div class="card-img">
<img src="https://via.placeholder.com/700x500.png/B7B7A4/333333?text=4" class="img-fluid">
</div>
<div class="card-img-overlay">Slide 4</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-3">
<div class="card">
<div class="card-img">
<img src="https://via.placeholder.com/700x500.png/A5A58D/333333?text=5" class="img-fluid">
</div>
<div class="card-img-overlay">Slide 5</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-3">
<div class="card">
<div class="card-img">
<img src="https://via.placeholder.com/700x500.png/6B705C/eeeeee?text=6" class="img-fluid">
</div>
<div class="card-img-overlay">Slide 6</div>
</div>
</div>
</div>
</div>
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-bs-target="#recipeCarousel" data-bs-slide-to="0" class="active"></li>
<li data-bs-target="#recipeCarousel" data-bs-slide-to="1"></li>
<li data-bs-target="#recipeCarousel" data-bs-slide-to="2"></li>
<li data-bs-target="#recipeCarousel" data-bs-slide-to="3"></li>
<li data-bs-target="#recipeCarousel" data-bs-slide-to="4"></li>
<li data-bs-target="#recipeCarousel" data-bs-slide-to="5"></li>
<!-- Add more indicators for additional carousel items -->
</ol>
<a class="carousel-control-prev bg-transparent w-aut" href="#recipeCarousel" role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
</a>
<a class="carousel-control-next bg-transparent w-aut" href="#recipeCarousel" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
</a>
</div>
</div>
</div>
3. Customize the carousel appearance using CSS. You can adjust sizes, colors, and styles to match your website’s design.
@media (max-width: 767px) {
.carousel-inner .carousel-item > div {
display: none;
}
.carousel-inner .carousel-item > div:first-child {
display: block;
}
}
.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
display: flex;
}
/* medium and up screens */
@media (min-width: 768px) {
.carousel-inner .carousel-item-end.active,
.carousel-inner .carousel-item-next {
transform: translateX(25%);
}
.carousel-inner .carousel-item-start.active,
.carousel-inner .carousel-item-prev {
transform: translateX(-25%);
}
}
.carousel-inner .carousel-item-end,
.carousel-inner .carousel-item-start {
transform: translateX(0);
}
4. Now, load the Bootstrap JS by adding the following CDN link just before closing the <body> tag:
<script src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.min.js'></script>
5. Finally, add the following JavaScript code to your project. This code dynamically adds additional items to the carousel to display multiple items at once.
let items = document.querySelectorAll('.carousel .carousel-item')
items.forEach((el) => {
const minPerSlide = 4
let next = el.nextElementSibling
for (var i=1; i<minPerSlide; i++) {
if (!next) {
// wrap carousel by using first child
next = items[0]
}
let cloneChild = next.cloneNode(true)
el.appendChild(cloneChild.children[0])
next = next.nextElementSibling
}
})
That’s all! hopefully, you have successfully created Bootstrap 5 Carousel Multiple Items with Indicators. If you have any questions or suggestions, feel free to comment below.
