"Thumbnail Carousel - Single image sliding"
Bootstrap 3.2.0 Snippet by megatela

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="row">
<div class="span12">
<div class="well dark-bg">
<div id="myCarousel" class="carousel fdi-Carousel slide">
<!-- Carousel items -->
<div class="carousel fdi-Carousel slide" id="eventCarousel" data-interval="0">
<div class="carousel-inner onebyone-caroseldark-bg ">
<div class="item active">
<div class="col-md-4">
<a href="#"><img src="http://placehold.it/250x250" class="img-responsive center-block"></a>
<div class="text-center">1</div>
</div>
</div>
<div class="item">
<div class="col-md-4">
<a href="#"><img src="http://placehold.it/250x250" class="img-responsive center-block"></a>
<div class="text-center">2</div>
</div>
</div>
<div class="item">
<div class="col-md-4">
<a href="#"><img src="http://placehold.it/250x250" class="img-responsive center-block"></a>
<div class="text-center">3</div>
</div>
</div>
<div class="item">
<div class="col-md-4">
<a href="#"><img src="http://placehold.it/250x250" class="img-responsive center-block"></a>
<div class="text-center">4</div>
</div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
.carousel-inner.onebyone-carosel { margin: auto; width: 90%; }
.onebyone-carosel .active.left { left: -33.33%; }
.onebyone-carosel .active.right { left: 33.33%; }
.onebyone-carosel .next { left: 33.33%; }
.onebyone-carosel .prev { left: -33.33%; }
.dark-bg {
background-color:#0040ff;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$(document).ready(function () {
$('#myCarousel').carousel({
interval: 10000
})
$('.fdi-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));
}
else {
$(this).siblings(':first').children(':first-child').clone().appendTo($(this));
}
});
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: