Bootstrap 5 Demo
Bootstrap 5 Code
Output
<!DOCTYPE html> <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script> <style> @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); } </style> </head> <body> <div class="container"> <h4 class="text-info">Bootstrap 5 Multiple Image Slider - Carousel</h4> <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="images/banana.jpg" class="img-fluid"> </div> <div class="card-img-overlay text-white">Banana</div> </div> </div> </div> <div class="carousel-item"> <div class="col-md-3"> <div class="card"> <div class="card-img"> <img src="images/mango.jpg" class="img-fluid"> </div> <div class="card-img-overlay text-white">Mango</div> </div> </div> </div> <div class="carousel-item"> <div class="col-md-3"> <div class="card"> <div class="card-img"> <img src="images/apple-2.jpg" class="img-fluid"> </div> <div class="card-img-overlay text-white">Apple</div> </div> </div> </div> <div class="carousel-item"> <div class="col-md-3"> <div class="card"> <div class="card-img"> <img src="images/pineapple-2.jpg" class="img-fluid"> </div> <div class="card-img-overlay text-white">Pine Apple</div> </div> </div> </div> <div class="carousel-item"> <div class="col-md-3"> <div class="card"> <div class="card-img"> <img src="images/currant.jpg" class="img-fluid"> </div> <div class="card-img-overlay text-white">Currant</div> </div> </div> </div> </div> <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> </div> <script> 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 } }) </script> </body> </html>
Bootstrap 5 Multiple Image Slider - Carousel
Banana
Mango
Apple
Pine Apple
Currant
