CodePen Home Bootstrap 4 carousel multiple items per slide responsive

HTML
<!DOCTYPE html> <html> <head> <title>Slick Playground</title> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="slider.css"> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" crossorigin="anonymous"> </head> <body> <div class="container"> <div class="row"> <div id="carousel" class="carousel slide" data-interval="false" data-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active"> <div class="d-none d-xl-block"> <div class="row"> <div class="col-xl-2"> <img class="d-block w-100 h-auto" class="d-block w-100 h-auto" src="https://ucarecdn.com/ae037a71-377c-4d33-941b-98c88da238de/offer32f8285b13bef950f843cb4147666af6e.png" alt="First slide"> </div> <div class="col-xl-2"> <img class="d-block w-100 h-auto" src="https://ucarecdn.com/7520bc6b-d4b0-4320-ac5a-502e1341cfe7/offer290d3534e1ad62a8b8a977f1290e61e9f.png" alt="First slide"> </div> <div class="col-xl-2"> <img class="d-block w-100 h-auto" src="https://ucarecdn.com/653fb990-89a6-4648-a833-510964f98e94/offer11f7a4c9ea0ba5a216bc7af1f60d044e0.png" alt="First slide"> </div> <div class="col-xl-2"> <img class="d-block w-100 h-auto" src="https://ucarecdn.com/ae037a71-377c-4d33-941b-98c88da238de/offer32f8285b13bef950f843cb4147666af6e.png" alt="First slide"> </div> <div class="col-xl-2"> <img class="d-block w-100 h-auto" src="https://ucarecdn.com/7520bc6b-d4b0-4320-ac5a-502e1341cfe7/offer290d3534e1ad62a8b8a977f1290e61e9f.png" alt="First slide"> </div> <div class="col-xl-2"> <img class="d-block w-100 h-auto" src="https://ucarecdn.com/653fb990-89a6-4648-a833-510964f98e94/offer11f7a4c9ea0ba5a216bc7af1f60d044e0.png" alt="First slide"> </div> </div> </div> <div class="d-none d-lg-block d-xl-none"> <div class="row"> <div class="col-lg-3"> <img class="d-block w-100 h-auto" class="d-block w-100 h-auto" src="https://ucarecdn.com/ae037a71-377c-4d33-941b-98c88da238de/offer32f8285b13bef950f843cb4147666af6e.png" alt="First slide"> </div> <div class="col-lg-3"> <img class="d-block w-100 h-auto" src="https://ucarecdn.com/7520bc6b-d4b0-4320-ac5a-502e1341cfe7/offer290d3534e1ad62a8b8a977f1290e61e9f.png" alt="First slide"> </div> <div class="col-lg-3"> <img class="d-block w-100 h-auto" src="https://ucarecdn.com/653fb990-89a6-4648-a833-510964f98e94/offer11f7a4c9ea0ba5a216bc7af1f60d044e0.png" alt="First slide"> </div> <div class="col-lg-3"> <img class="d-block w-100 h-auto" src="https://ucarecdn.com/ae037a71-377c-4d33-941b-98c88da238de/offer32f8285b13bef950f843cb4147666af6e.png" alt="First slide"> </div> </div> </div> <div class="d-none d-md-block d-lg-none"> <div class="slide-box"> <div class="row"> <div class="col-md-4"> <img class="d-block w-100 h-auto" class="d-block w-100 h-auto" src="https://ucarecdn.com/7520bc6b-d4b0-4320-ac5a-502e1341cfe7/offer290d3534e1ad62a8b8a977f1290e61e9f.png" alt="First slide"> </div> <div class="col-md-4"> <img class="d-block w-100 h-auto" src="https://ucarecdn.com/653fb990-89a6-4648-a833-510964f98e94/offer11f7a4c9ea0ba5a216bc7af1f60d044e0.png" alt="First slide"> </div> <div class="col-md-4"> <img class="d-block w-100 h-auto" src="https://ucarecdn.com/ae037a71-377c-4d33-941b-98c88da238de/offer32f8285b13bef950f843cb4147666af6e.png" alt="First slide"> </div> </div> </div></div> <div class="d-none d-sm-block d-md-none"> <div class="row"> <div class="col-sm-6"> <img class="d-block w-100 h-auto" src="https://ucarecdn.com/7520bc6b-d4b0-4320-ac5a-502e1341cfe7/offer290d3534e1ad62a8b8a977f1290e61e9f.png" alt="First slide"> </div> <div class="col-sm-6"> <img class="d-block w-100 h-auto" src="https://ucarecdn.com/653fb990-89a6-4648-a833-510964f98e94/offer11f7a4c9ea0ba5a216bc7af1f60d044e0.png" alt="First slide"> </div> </div> </div> <div class="d-block d-sm-none"> <div class="row"> <div class="col-12"> <img class="d-block w-100 h-auto" src="https://ucarecdn.com/ae037a71-377c-4d33-941b-98c88da238de/offer32f8285b13bef950f843cb4147666af6e.png" alt="First slide"> </div> </div> </div> </div> <div class="carousel-item"> <div class="d-none d-xl-block"> <div class="row"> <div class="col-xl-2"> <img class="d-block w-100 h-auto" class="d-block w-100 h-auto" src="https://ucarecdn.com/ae037a71-377c-4d33-941b-98c88da238de/offer32f8285b13bef950f843cb4147666af6e.png" alt="First slide"> </div> <div class="col-xl-2"> <img class="d-block w-100 h-auto" src="https://ucarecdn.com/7520bc6b-d4b0-4320-ac5a-502e1341cfe7/offer290d3534e1ad62a8b8a977f1290e61e9f.png" alt="First slide"> </div> <div class="col-xl-2"> <img class="d-block w-100 h-auto" src="https://ucarecdn.com/653fb990-89a6-4648-a833-510964f98e94/offer11f7a4c9ea0ba5a216bc7af1f60d044e0.png" alt="First slide"> </div> <div class="col-xl-2"> <img class="d-block w-100 h-auto" src="https://ucarecdn.com/ae037a71-377c-4d33-941b-98c88da238de/offer32f8285b13bef950f843cb4147666af6e.png" alt="First slide"> </div> <div class="col-xl-2"> <img class="d-block w-100 h-auto" src="https://ucarecdn.com/7520bc6b-d4b0-4320-ac5a-502e1341cfe7/offer290d3534e1ad62a8b8a977f1290e61e9f.png" alt="First slide"> </div> <div class="col-xl-2"> <img class="d-block w-100 h-auto" src="https://ucarecdn.com/653fb990-89a6-4648-a833-510964f98e94/offer11f7a4c9ea0ba5a216bc7af1f60d044e0.png" alt="First slide"> </div> </div> </div> <div class="d-none d-lg-block d-xl-none"> <div class="row"> <div class="col-lg-3"> <img class="d-block w-100 h-auto" class="d-block w-100 h-auto" src="https://ucarecdn.com/ae037a71-377c-4d33-941b-98c88da238de/offer32f8285b13bef950f843cb4147666af6e.png" alt="First slide"> </div> <div class="col-lg-3"> <img class="d-block w-100 h-auto" src="https://ucarecdn.com/7520bc6b-d4b0-4320-ac5a-502e1341cfe7/offer290d3534e1ad62a8b8a977f1290e61e9f.png" alt="First slide"> </div> <div class="col-lg-3"> <img class="d-block w-100 h-auto" src="https://ucarecdn.com/653fb990-89a6-4648-a833-510964f98e94/offer11f7a4c9ea0ba5a216bc7af1f60d044e0.png" alt="First slide"> </div> <div class="col-lg-3"> <img class="d-block w-100 h-auto" src="https://ucarecdn.com/ae037a71-377c-4d33-941b-98c88da238de/offer32f8285b13bef950f843cb4147666af6e.png" alt="First slide"> </div> </div> </div> <div class="d-none d-md-block d-lg-none"> <div class="slide-box"> <div class="row"> <div class="col-md-4"> <img class="d-block w-100 h-auto" class="d-block w-100 h-auto" src="https://ucarecdn.com/7520bc6b-d4b0-4320-ac5a-502e1341cfe7/offer290d3534e1ad62a8b8a977f1290e61e9f.png" alt="First slide"> </div> <div class="col-md-4"> <img class="d-block w-100 h-auto" src="https://ucarecdn.com/653fb990-89a6-4648-a833-510964f98e94/offer11f7a4c9ea0ba5a216bc7af1f60d044e0.png" alt="First slide"> </div> <div class="col-md-4"> <img class="d-block w-100 h-auto" src="https://ucarecdn.com/ae037a71-377c-4d33-941b-98c88da238de/offer32f8285b13bef950f843cb4147666af6e.png" alt="First slide"> </div> </div> </div></div> <div class="d-none d-sm-block d-md-none"> <div class="row"> <div class="col-sm-6"> <img class="d-block w-100 h-auto" src="https://ucarecdn.com/7520bc6b-d4b0-4320-ac5a-502e1341cfe7/offer290d3534e1ad62a8b8a977f1290e61e9f.png" alt="First slide"> </div> <div class="col-sm-6"> <img class="d-block w-100 h-auto" src="https://ucarecdn.com/653fb990-89a6-4648-a833-510964f98e94/offer11f7a4c9ea0ba5a216bc7af1f60d044e0.png" alt="First slide"> </div> </div> </div> <div class="d-block d-sm-none"> <div class="row"> <div class="col-12"> <img class="d-block w-100 h-auto" src="https://ucarecdn.com/ae037a71-377c-4d33-941b-98c88da238de/offer32f8285b13bef950f843cb4147666af6e.png" alt="First slide"> </div> </div> </div> </div> </div> <a class="carousel-control-prev" href="#carousel" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carousel" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div></div> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> </body> </html>
CSS
.container { max-width: 1566px !important; } .carousel { width: 100%; } img { height: 122px; object-fit: cover; box-shadow: 0 1px 0 0 rgba(232,233,235,.5); filter: sepia(.1) grayscale(.1) saturate(.8); }
Javascript
/* Carousel */ $('#carousel-example').on('slide.bs.carousel', function (e) { /* CC 2.0 License Iatek LLC 2018 - Attribution required */ var $e = $(e.relatedTarget); var idx = $e.index(); var itemsPerSlide = 5; var totalItems = $('.carousel-item').length; if (idx >= totalItems-(itemsPerSlide-1)) { var it = itemsPerSlide - (totalItems - idx); for (var i=0; i<it; i++) { // append slides to end if (e.direction=="left") { $('.carousel-item').eq(i).appendTo('.carousel-inner'); } else { $('.carousel-item').eq(0).appendTo('.carousel-inner'); } } } });