<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="container">
<div class="row">
<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>
</div>
</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;
}
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,
},
},
});
