"Swiper Carousel"
Bootstrap 4.1.1 Snippet by SANTANU CHOWDHURY

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
.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;
}
}
*/
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
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,
},
},
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Vue Material Kit
Bootstrap 4 Carousel
Carousel with Search
Bootstrap 4 Blog Carousel

Questions / Comments: