Carrosséis de bootstrap

Exemplo de controles deslizantes duplos. Um carrossel para miniaturas e um carrossel maior para imagens em tamanho real. Usa o componente Carrossel Bootstrap 3. O controle deslizante de miniaturas mostra 4 imagens por vez.

// 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