Bootstrap Carousels

Dual sliders example. One carousel for thumbnails, and a larger carousel for full size images. Uses the Bootstrap 3 Carousel component. The thumbnail slider shows 4 images at a time.

// handles the carousel thumbnails
$('[id^=carousel-selector-]').click( function(){
 var id_selector = $(this).attr("id");
 var id = id_selector.substr(id_selector.length -1);
 id = parseInt(id);
 $('#myCarousel').carousel(id);
 $('[id^=carousel-selector-]').removeClass('selected');
 $(this).addClass('selected');
});

// when the carousel slides, auto update
$('#myCarousel').on('slid', function (e) {
 var id = $('#myCarousel .item.active').data('slide-number');
 id = parseInt(id);
 $('#thCarousel [id^=carousel-selector-]').removeClass('selected');
 $('#thCarousel .item.active [id^=carousel-selector-'+id+']').addClass('selected');
});

http://www.bootply.com/116972