bootstrap 4 carousel multiple items responsive
<!-- Top content --> <div class="top-content"> <div class="container-fluid"> <div id="carousel-example" class="carousel slide" data-ride="carousel"> <div class="carousel-inner row w-100 mx-auto" role="listbox"> <div class="carousel-item col-12 col-sm-6 col-md-4 col-lg-3 active"> <img src="assets/img/backgrounds/1.jpg" class="img-fluid mx-auto d-block" alt="img1"> </div> <div class="carousel-item col-12 col-sm-6 col-md-4 col-lg-3"> <img src="assets/img/backgrounds/2.jpg" class="img-fluid mx-auto d-block" alt="img2"> </div> <div class="carousel-item col-12 col-sm-6 col-md-4 col-lg-3"> <img src="assets/img/backgrounds/3.jpg" class="img-fluid mx-auto d-block" alt="img3"> </div> <div class="carousel-item col-12 col-sm-6 col-md-4 col-lg-3"> <img src="assets/img/backgrounds/4.jpg" class="img-fluid mx-auto d-block" alt="img4"> </div> <div class="carousel-item col-12 col-sm-6 col-md-4 col-lg-3"> <img src="assets/img/backgrounds/5.jpg" class="img-fluid mx-auto d-block" alt="img5"> </div> <div class="carousel-item col-12 col-sm-6 col-md-4 col-lg-3"> <img src="assets/img/backgrounds/6.jpg" class="img-fluid mx-auto d-block" alt="img6"> </div> <div class="carousel-item col-12 col-sm-6 col-md-4 col-lg-3"> <img src="assets/img/backgrounds/7.jpg" class="img-fluid mx-auto d-block" alt="img7"> </div> <div class="carousel-item col-12 col-sm-6 col-md-4 col-lg-3"> <img src="assets/img/backgrounds/8.jpg" class="img-fluid mx-auto d-block" alt="img8"> </div> </div> <a class="carousel-control-prev" href="#carousel-example" 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-example" 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>