"Carousel responsive "
Bootstrap 4.1.1 Snippet by Tris92

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 ---------->
<div class="container" id="carousel">
<div id="carouselExample" class="carousel slide" data-ride="carousel" data-interval="3000">
<div class="carousel-inner row w-100 mx-auto" role="listbox" id="img-saveurs">
<div class="carousel-item col-md-3 active">
<div class="panel panel-default">
<div class="panel-thumbnail">
<a href="#modal-saveurs" class="thumb">
<img class="img-fluid mx-auto d-block" src="http://via.placeholder.com/350x150">
</a>
</div>
</div>
</div>
<div class="carousel-item col-md-3 ">
<div class="panel panel-default">
<div class="panel-thumbnail">
<a href="#modal-saveurs" class="thumb">
<img class="img-fluid mx-auto d-block" src="http://via.placeholder.com/350x150" >
</a>
</div>
</div>
</div>
<div class="carousel-item col-md-3 ">
<div class="panel panel-default">
<div class="panel-thumbnail">
<a href="#modal-saveurs" class="thumb">
<img class="img-fluid mx-auto d-block" src="http://via.placeholder.com/350x150" >
</a>
</div>
</div>
</div>
<div class="carousel-item col-md-3 ">
<div class="panel panel-default">
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
32
33
34
35
36
37
#carousel {
margin: auto;
}
@media (min-width: 768px) {
/* show 3 items */
.carousel-inner .active,
.carousel-inner .active + .carousel-item,
.carousel-inner .active + .carousel-item + .carousel-item,
.carousel-inner .active + .carousel-item + .carousel-item + .carousel-item {
display: block;
}
.carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),
.carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item,
.carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item,
.carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item + .carousel-item {
transition: none;
}
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
position: relative;
transform: translate3d(0, 0, 0);
}
.carousel-inner .active.carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
position: absolute;
top: 0;
right: -25%;
z-index: -1;
display: block;
visibility: visible;
}
/* left or forward direction */
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
$('#carousel').on('slide.bs.carousel', function (e) {
var $e = $(e.relatedTarget);
var idx = $e.index();
var itemsPerSlide = 4;
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');
}
}
}
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Argon Dashboard
Responsive Invoice template
Responsive Data Cards (Bootstrap 4)
Bootstrap 4 Carousel

Questions / Comments:

Doesn't work with bootstrap 4.3.1.

Need to add :

.carousel-item {

margin-right: 0px !important;

}

minusmaster () - 5 years ago - Reply 0