"Swiper Carousel"
Bootstrap 4.1.1 Snippet by SANTANU CHOWDHURY

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css" /> <script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script> <div class="swiper mySwiper"> <div class="swiper-wrapper"> <div class="swiper-slide"> <img src="https://dummyimage.com/640x640/aaa/fff" class="img-responsive" alt=""> </div> <div class="swiper-slide"> <img src="https://dummyimage.com/640x640/aaa/fff" class="img-responsive" alt=""> </div> <div class="swiper-slide"> <img src="https://dummyimage.com/640x640/aaa/fff" class="img-responsive" alt=""> </div> <div class="swiper-slide"> <img src="https://dummyimage.com/640x640/aaa/fff" class="img-responsive" alt=""> </div> <div class="swiper-slide"> <img src="https://dummyimage.com/640x640/aaa/fff" class="img-responsive" alt=""> </div> <div class="swiper-slide"> <img src="https://dummyimage.com/640x640/aaa/fff" class="img-responsive" alt=""> </div> <div class="swiper-slide"> <img src="https://dummyimage.com/640x640/aaa/fff" class="img-responsive" alt=""> </div> <div class="swiper-slide"> <img src="https://dummyimage.com/640x640/aaa/fff" class="img-responsive" alt=""> </div> <div class="swiper-slide"> <img src="https://dummyimage.com/640x640/aaa/fff" class="img-responsive" alt=""> </div> </div> <div class="swiper-button-next"></div> <div class="swiper-button-prev"></div> </div> <div class="swiper-pagination"></div>
.swiper-button-prev, .swiper-button-next { width: 40px; height: 40px; background: #eaeaea; border-radius: 50%; } .swiper-button-prev:after, .swiper-button-next:after { font-size: 20px; } /* LESS */ /* .swiper-button-prev, .swiper-button-next{ width: 40px; height: 40px; background: #eaeaea; border-radius: 50%; &:after{ font-size: 20px; } } */
var swiper = new Swiper(".mySwiper", { slidesPerView: 1, spaceBetween: 10, autoplay: { delay: 2500, disableOnInteraction: false, }, navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev", }, pagination: { el: ".swiper-pagination", clickable: true, }, breakpoints: { 640: { slidesPerView: 2, spaceBetween: 20, }, 768: { slidesPerView: 4, spaceBetween: 20, }, 1024: { slidesPerView: 4, spaceBetween: 20, }, }, });

Related: See More


Questions / Comments: