Author: | Sachin-U-Krishna |
---|---|
Views Total: | 6,821 views |
Official Page: | Go to website |
Last Update: | December 16, 2022 |
License: | MIT |
Preview:

Description:
Just another JavaScript & CSS extension to create a responsive and multi-item carousel using Bootstrap 5’s carousel component.
See Also:
How to use it:
1. To get started, make sure you have the latest Bootstrap 5 framework installed in the document.
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" /> <script src="/path/to/cdn/bootstrap.bundle.min.js"></script>
2. The main HTML structure for the multi-item carousel.
<div class="container my-3 mt-5" id="featureContainer"> <div class="row mx-auto my-auto justify-content-center"> <div id="featureCarousel" class="carousel slide" data-bs-ride="carousel"> <!-- Carousel Controls. OPTIONAL --> <div class="float-end pe-md-4"> <a class="indicator" href="#featureCarousel" role="button" data-bs-slide="prev"> Left Arrow Here </a> <a class="w-aut indicator" href="#featureCarousel" role="button" data-bs-slide="next"> Right Arrow Here </a> </div> <!-- Add Slides To The 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="img1.jpg" class="img-fluid"> </div> <div class="card-img-overlays">Slide 1</div> </div> </div> </div> <div class="carousel-item"> <div class="col-md-3"> <div class="card"> <div class="card-img"> <img src="img2.jpg" class="img-fluid"> </div> <div class="card-img-overlays">Slide 2</div> </div> </div> </div> <div class="carousel-item"> <div class="col-md-3"> <div class="card"> <div class="card-img"> <img src="img3.jpg" class="img-fluid"> </div> <div class="card-img-overlays">Slide 3</div> </div> </div> </div> ... more slides here </div> </div> </div> </div>
3. Additional CSS styles.
.container { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; } @media (min-width: 768px) { .container { width: 750px; } } @media (min-width: 992px) { .container { width: 970px; } } @media (min-width: 1200px) { .container { width: 1170px; } } @media (max-width: 767px) { #featureContainer .carousel-inner .carousel-item > div { display: none; } #featureContainer .carousel-inner .carousel-item > div:first-child { display: block; } } #featureContainer .carousel-inner .carousel-item.active, #featureContainer .carousel-inner .carousel-item-next, #featureContainer .carousel-inner .carousel-item-prev { display: flex; } @media (min-width: 768px) { #featureContainer .carousel-inner .carousel-item-end.active, #featureContainer .carousel-inner .carousel-item-next { transform: translateX(25%); } #featureContainer .carousel-inner .carousel-item-start.active, #featureContainer .carousel-inner .carousel-item-prev { transform: translateX(-25%); } #featureContainer .card img{ width: 90%; height: 40vh; } #featureContainer .carousel-item{ justify-content: space-between; } } @media (max-width: 767px) { #featureContainer .card img{ width: 100%; height: 75vh; } } #featureContainer .carousel-inner .carousel-item-end, #featureContainer .carousel-inner .carousel-item-start { transform: translateX(0); } #featureContainer .card{ border: 0; } #featureContainer .card{ position: relative; } #featureContainer .card .card-img-overlays{ position: absolute; bottom: 15%; left: 10%; } #featureContainer a{ text-decoration: none; } #featureContainer .indicator{ border: 1px solid rgb(202, 202, 202); padding: 3px 6px 3px 6px; } #featureContainer .indicator:hover{ background-color: blue; border: 1px solid blue; transition: 200ms; } #featureContainer .indicator:hover{ color: white; transition: 200ms; } #featureContainer .indicator { color: lightgray; } #featureContainer .float-end{ padding-top: 10px; }
4. Enable the multi-slide carousel.
let myCarousel = document.querySelectorAll('#featureContainer .carousel .carousel-item'); myCarousel.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 = myCarousel[0] } let cloneChild = next.cloneNode(true) el.appendChild(cloneChild.children[0]) next = next.nextElementSibling } })