"Infinite carousel (loop) multi-Item"
Bootstrap 3.2.0 Snippet by sdcarte

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="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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">
<div class="col-md-12">
<div class="carousel slide" id="myCarousel">
<div class="carousel-inner">
<div class="item active">
<div class="col-lg-4 col-xs-4 col-md-4 col-sm-4">
<a href="#"><img src="http://lorempixel.com/400/200/sports" class="img-responsive">1</a></div>
</div>
<div class="item">
<div class="col-lg-4 col-xs-4 col-md-4 col-sm-4">
<a href="#"><img src="http://lorempixel.com/400/200/" class="img-responsive">2</a></div>
</div>
<div class="item">
<div class="col-lg-4 col-xs-4 col-md-4 col-sm-4">
<a href="#"><img src="http://lorempixel.com/400/200/sports" class="img-responsive">3</a></div>
</div>
<div class="item">
<div class="col-lg-4 col-xs-4 col-md-4 col-sm-4">
<a href="#"><img src="http://lorempixel.com/400/200/" class="img-responsive">4</a></div>
</div>
<div class="item">
<div class="col-lg-4 col-xs-4 col-md-4 col-sm-4">
<a href="#"><img src="http://lorempixel.com/400/200/sports" class="img-responsive">5</a></div>
</div>
<div class="item">
<div class="col-lg-4 col-xs-4 col-md-4 col-sm-4">
<a href="#"><img src="http://lorempixel.com/400/200/" class="img-responsive">6</a></div>
</div>
<div class="item">
<div class="col-lg-4 col-xs-4 col-md-4 col-sm-4">
<a href="#"><img src="http://lorempixel.com/400/200/sports" class="img-responsive">7</a></div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
.carousel-inner .active.left { left: -33%; }
.carousel-inner .next { left: 33%; }
.carousel-inner .prev { left: -33%; }
.carousel-control.left,.carousel-control.right {background-image:none;}
.item:not(.prev) {visibility: visible;}
.item.right:not(.prev) {visibility: hidden;}
.rightest{ visibility: visible;}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$('#myCarousel').carousel({
interval: 40000
});
$('.carousel .item').each(function(){
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
if (next.next().length>0) {
next.next().children(':first-child').clone().appendTo($(this)).addClass('rightest');
}
else {
$(this).siblings(':first').children(':first-child').clone().appendTo($(this));
}
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments:

If you want 4 images to slider, you can add code js and change html to class col-lg-3 col-xs-3 col-md-3 col-sm-3:

js:

$('#myCarousel').carousel({

interval: 40000

});

$('.carousel .item').each(function() {

var next = $(this).next();

if (!next.length) {

next = $(this).siblings(':first');

}

next.children(':first-child').clone().appendTo($(this));

for (var i = 0; i < 2; i++) {

next = next.next();

if (!next.length) {

next = $(this).siblings(':first');

}

next.children(':first-child').clone().appendTo($(this));

}

});

doantutai (1) - 5 years ago - Reply 1


Or you want 4 images to slider , can to link:

https://www.bootply.com/94452

doantutai (1) - 5 years ago - Reply 0