"Carousel with Gallery Thumbs"
Bootstrap 3.2.0 Snippet by LabWorkz

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 id="main_area">
<!-- Slider -->
<div class="row">
<div class="col-sm-6" id="slider-thumbs">
<!-- Bottom switcher of slider -->
<ul class="hide-bullets">
<li class="col-sm-3">
<a class="thumbnail" id="carousel-selector-0">
<img src="http://placehold.it/150x150&text=zero">
</a>
</li>
<li class="col-sm-3">
<a class="thumbnail" id="carousel-selector-1"><img src="http://placehold.it/150x150&text=1"></a>
</li>
<li class="col-sm-3">
<a class="thumbnail" id="carousel-selector-2"><img src="http://placehold.it/150x150&text=2"></a>
</li>
<li class="col-sm-3">
<a class="thumbnail" id="carousel-selector-3"><img src="http://placehold.it/150x150&text=3"></a>
</li>
<li class="col-sm-3">
<a class="thumbnail" id="carousel-selector-4"><img src="http://placehold.it/150x150&text=4"></a>
</li>
<li class="col-sm-3">
<a class="thumbnail" id="carousel-selector-5"><img src="http://placehold.it/150x150&text=5"></a>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
.hide-bullets {
list-style:none;
margin-left: -40px;
margin-top:20px;
}
.thumbnail {
padding: 0;
}
.carousel-inner>.item>img, .carousel-inner>.item>a>img {
width: 100%;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
jQuery(document).ready(function($) {
$('#myCarousel').carousel({
interval: 5000
});
//Handles the carousel thumbnails
$('[id^=carousel-selector-]').click(function () {
var id_selector = $(this).attr("id");
try {
var id = /-(\d+)$/.exec(id_selector)[1];
console.log(id_selector, id);
jQuery('#myCarousel').carousel(parseInt(id));
} catch (e) {
console.log('Regex failed!', e);
}
});
// When the carousel slides, auto update the text
$('#myCarousel').on('slid.bs.carousel', function (e) {
var id = $('.item.active').data('slide-number');
$('#carousel-text').html($('#slide-content-'+id).html());
});
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments:

I'm trying to have multiple carousels in one html, but it doesn't work
Can someone help me?

Andrea Sandoval () - 7 years ago - Reply 0


gracias sirvio de mucho

Roberto Román Diaz () - 7 years ago - Reply 0


Excelente muchas gracias

Gammy1988 () - 7 years ago - Reply 0


Thanks

Joseph Mtinangi () - 8 years ago - Reply 0


Hi everyone. I urgently need help concerning the code. Where should i place the JS part?

Monisha Sungsam () - 8 years ago - Reply 0


Hi, awesome, how can I fix to have another size image, example 400X300 ? Not square, rectangle

alexandra mora () - 8 years ago - Reply 0


im having problem to my this dynamically see my code and tell me where is wrong...
http://stackoverflow.com/qu...

James Allan () - 8 years ago - Reply 0


I am having an issue with it, when I click on an image the carousel doesn't change accordingly. Can anyone help?

Sufian Kayar () - 8 years ago - Reply 0


add js-script at the end

salem ibrahim () - 8 years ago - Reply 0


Nice!

Bang () - 8 years ago - Reply 0


fixed!

alessandro () - 8 years ago - Reply 0


how can i increase the number of thumbnails?
thank you!

alessandro () - 8 years ago - Reply 0


Hi Alessandro, did you get this one figured out?

Smart Cuts () - 7 years ago - Reply 0


Another thing:

How can I "float" all the thumbinails to the left when I don't have thumb enough to fill the row?

RBNZ () - 9 years ago - Reply 0


Is great and I like it, but how can I give a style to the active thumb?

RBNZ () - 9 years ago - Reply 0


Not working for me :( - Nuno @ http://www.nuno-sarmento.com

Nuno Sarmento () - 9 years ago - Reply 0


nice, thanks!

KaosNihil () - 9 years ago - Reply 0


awesome one...

Ihsan khan () - 9 years ago - Reply 0