"bootstrap 4 multiple carousel "
Bootstrap 4.0.0 Snippet by krzych756

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.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container-fluid">
<div id="carouselExample" class="carousel slide" data-ride="carousel" data-interval="9000">
<div class="carousel-inner row w-100 mx-auto" role="listbox">
<div class="carousel-item col-md-3 active">
<div class="panel panel-default">
<div class="panel-thumbnail">
<a href="#" title="image 1" class="thumb">
<img class="img-fluid mx-auto d-block" src="//via.placeholder.com/600x400?text=1" alt="slide 1">
</a>
</div>
</div>
</div>
<div class="carousel-item col-md-3 ">
<div class="panel panel-default">
<div class="panel-thumbnail">
<a href="#" title="image 3" class="thumb">
<img class="img-fluid mx-auto d-block" src="//via.placeholder.com/600x400?text=2" alt="slide 2">
</a>
</div>
</div>
</div>
<div class="carousel-item col-md-3 ">
<div class="panel panel-default">
<div class="panel-thumbnail">
<a href="#" title="image 4" class="thumb">
<img class="img-fluid mx-auto d-block" src="//via.placeholder.com/600x400?text=3" alt="slide 3">
</a>
</div>
</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
30
31
32
33
34
35
36
37
@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 */
.active.carousel-item-left + .carousel-item-next.carousel-item-left,
.carousel-item-next.carousel-item-left + .carousel-item,
.carousel-item-next.carousel-item-left + .carousel-item + .carousel-item,
.carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item,
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
$('#carouselExample').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');
}
}
}
});
$('#carouselExample').carousel({
interval: 2000
});
$(document).ready(function() {
/* show lightbox when clicking a thumbnail */
$('a.thumb').click(function(event){
event.preventDefault();
var content = $('.modal-body');
content.empty();
var title = $(this).attr("title");
$('.modal-title').html(title);
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments:

not working bootstrap 4.1.1

santhosh1198 (0) - 6 years ago - Reply 0


I add:

.carousel-item {margin-right: auto !important;}

and it works for me

prym7792 (2) - 6 years ago - Reply 2


Oh Gosh thank you so much!!! This one string saved my life really! Been searching for a really long time for info how to make a carousel i need!

YuliyaBiazzubenka () - 5 years ago - Reply 0


how to show two item in carousal

gmehtaice (0) - 6 years ago - Reply 0


This Carousel doesnt work with latest version of bootstrap 4 as per the example here anyone with an idea or who have a solution?

gathumartins (-2) - 6 years ago - Reply -2


Не работает.

ev-kov () - 4 years ago - Reply 0


Не работает...

ev-kov () - 4 years ago - Reply 0


Huge thanks to you!! This carousel is what i need exactly!

YuliyaBiazzubenka () - 5 years ago - Reply 0


issue On Prev arrow click How to fix It?

nikhilsan () - 6 years ago - Reply 0


Why if you change boot strap version to 4.3.1 it does'n work

eldonfsr () - 6 years ago - Reply 0


How to make infinite loop?

adrianahr () - 6 years ago - Reply 0


How to move the next and prev near to start and adge of photos... i can't down load all source i copy an paste but not works in same way...

eldonfsr () - 6 years ago - Reply 0


The first carousel-item doesn't close after the last one. Like in this example. Do you have a solution?

biancailona () - 7 years ago - Reply 0