<div class="container"> <!-- thumb navigation carousel --> <div class="col-md-12 hidden-sm hidden-xs" id="slider-thumbs"> <!-- thumb navigation carousel items --> <ul class="list-inline"> <img src="http://placehold.it/80x60&text=one" class="img-responsive"> <img src="http://placehold.it/80x60&text=two" class="img-responsive"> <img src="http://placehold.it/80x60&text=three" class="img-responsive"> <img src="http://placehold.it/80x60&text=four" class="img-responsive"> <img src="http://placehold.it/80x60&text=five" class="img-responsive"> <img src="http://placehold.it/80x60&text=six" class="img-responsive"> <img src="http://placehold.it/80x60&text=seven" class="img-responsive"> <img src="http://placehold.it/80x60&text=eight" class="img-responsive"> <img src="http://placehold.it/80x60&text=nine" class="img-responsive"> <img src="http://placehold.it/80x60&text=ten" class="img-responsive"> <img src="http://placehold.it/80x60&text=eleven" class="img-responsive"> </ul> </div> <!-- main slider carousel --> <div class="row"> <div class="col-md-12" id="slider"> <div class="col-md-12" id="carousel-bounding-box"> <div id="myCarousel" class="carousel slide"> <!-- main slider carousel items --> <div class="carousel-inner"> <div class="active item" data-slide-number="0"> <img src="http://placehold.it/1200x480&text=one" class="img-responsive"> </div> <div class="item" data-slide-number="1"> <img src="http://placehold.it/1200x480/888/FFF" class="img-responsive"> </div> <div class="item" data-slide-number="2"> <img src="http://placehold.it/1200x480&text=three" class="img-responsive"> </div> <div class="item" data-slide-number="3"> <img src="http://placehold.it/1200x480&text=four" class="img-responsive"> </div> <div class="item" data-slide-number="4"> <img src="http://placehold.it/1200x480&text=five" class="img-responsive"> </div> <div class="item" data-slide-number="5"> <img src="http://placehold.it/1200x480&text=six" class="img-responsive"> </div> <div class="item" data-slide-number="6"> <img src="http://placehold.it/1200x480&text=seven" class="img-responsive"> </div> <div class="item" data-slide-number="7"> <img src="http://placehold.it/1200x480&text=eight" class="img-responsive"> </div> <div class="item" data-slide-number="8"> <img src="http://placehold.it/1200x480&text=nine" class="img-responsive"> </div> <div class="item" data-slide-number="9"> <img src="http://placehold.it/1200x480&text=ten" class="img-responsive"> </div> <div class="item" data-slide-number="10"> <img src="http://placehold.it/1200x480&text=eleven" class="img-responsive"> </div> </div> </div> </div> </div> </div> <!--/main slider carousel--> </div>
Oraz do tego taki kod.
$('#myCarousel').carousel({ pause: true }); // 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 = $('.item.active').data('slide-number'); id = parseInt(id); $('[id^=carousel-selector-]').removeClass('selected'); $('[id=carousel-selector-'+id+']').addClass('selected'); });
Problem robi się wtedy, gdy id jest większe od 9, przy id 10 po kliknięciu na miniaturkę slider wraca do obrazka o id 0, i analogicznie miniaturka z id 11 kieruje do obrazka o id 1. Czy wiecie jak to naprawić? Byłbym wdzięczny za pomoc
