"Fix for "Infinite carousel (loop) multi-Item" posted by sdcarte"
Bootstrap 3.3.0 Snippet by Janis

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/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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"> <!-- HTML code without any changes from sdcarte -->
<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
9
10
11
12
13
14
15
16
17
/* CSS with fixes for Bootstrap 3.3.0 */
.carousel-inner>.item.active,
.carousel-inner>.item.next.left,
.carousel-inner>.item.prev.right,
.carousel-inner>.item.active.left,
.carousel-inner>.item.prev,
.carousel-inner>.item.active.right,
.carousel-inner>.item.next {transform: inherit}
.carousel-inner .item.active.left { left: -33.33333%; }
.carousel-inner .item.next { left: 33.33333%; }
.carousel-inner .item.prev { left: -33.33333%; }
.carousel-control.left,.carousel-control.right {background-image:none;}
.carousel-inner .item:not(.prev) {visibility: visible;}
.carousel-inner .item.right:not(.prev) {visibility: hidden;}
.rightest{ visibility: visible;}
.carousel-inner>.item {transition: .6s ease-in-out left;}
.carousel-inner>.item.active.right {left: 100%;transition: 1.03s ease-in-out left;}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// JS also have some changes
$('#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)).addClass('rightest');
}
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Vue Now UI Kit
Login Class="Gabriel"
Bootstrap 4 Carousel
Carousel with Search

Questions / Comments: