Bootstrap Carousel z nawigacją miniaturami Opcje

[4lex]

Cześć wszystkim, mam taki kod do slidera z nawigacją w postaci miniaturek do Bootstrapa.

[HTML] pobierz, plaintext 
<div class="container">
<h1>Bootstrap 3 Thumbnail Slider / Carousel</h1>
 
 
  	<!-- thumb navigation carousel -->
    <div class="col-md-12 hidden-sm hidden-xs" id="slider-thumbs">
 
            <!-- thumb navigation carousel items -->
          <ul class="list-inline">
          <li> <a id="carousel-selector-0" class="selected">
            <img src="http://placehold.it/80x60&amp;text=one" class="img-responsive">
          </a></li>
          <li> <a id="carousel-selector-1">
            <img src="http://placehold.it/80x60&amp;text=two" class="img-responsive">
          </a></li>
          <li> <a id="carousel-selector-2">
            <img src="http://placehold.it/80x60&amp;text=three" class="img-responsive">
          </a></li>
          <li> <a id="carousel-selector-3">
            <img src="http://placehold.it/80x60&amp;text=four" class="img-responsive">
          </a></li>
                <li> <a id="carousel-selector-4">
            <img src="http://placehold.it/80x60&amp;text=five" class="img-responsive">
          </a></li>
          <li> <a id="carousel-selector-5">
            <img src="http://placehold.it/80x60&amp;text=six" class="img-responsive">
          </a></li>
          <li> <a id="carousel-selector-6">
            <img src="http://placehold.it/80x60&amp;text=seven" class="img-responsive">
          </a></li>
          <li> <a id="carousel-selector-7">
            <img src="http://placehold.it/80x60&amp;text=eight" class="img-responsive">
          </a></li>
                      <li> <a id="carousel-selector-8">
            <img src="http://placehold.it/80x60&amp;text=nine" class="img-responsive">
          </a></li>
          <li> <a id="carousel-selector-9">
            <img src="http://placehold.it/80x60&amp;text=ten" class="img-responsive">
          </a></li>
          <li> <a id="carousel-selector-10">
            <img src="http://placehold.it/80x60&amp;text=eleven" class="img-responsive">
          </a></li>
            </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&amp;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&amp;text=three" class="img-responsive">
                            </div>
                            <div class="item" data-slide-number="3">
                                <img src="http://placehold.it/1200x480&amp;text=four" class="img-responsive">
                            </div>
                            <div class="item" data-slide-number="4">
                                <img src="http://placehold.it/1200x480&amp;text=five" class="img-responsive">
                            </div>
                            <div class="item" data-slide-number="5">
                                <img src="http://placehold.it/1200x480&amp;text=six" class="img-responsive">
                            </div>
                            <div class="item" data-slide-number="6">
                                <img src="http://placehold.it/1200x480&amp;text=seven" class="img-responsive">
                            </div>
                            <div class="item" data-slide-number="7">
                                <img src="http://placehold.it/1200x480&amp;text=eight" class="img-responsive">
                            </div>
                            <div class="item" data-slide-number="8">
                                <img src="http://placehold.it/1200x480&amp;text=nine" class="img-responsive">
                            </div>
                            <div class="item" data-slide-number="9">
                                <img src="http://placehold.it/1200x480&amp;text=ten" class="img-responsive">
                            </div>
                            <div class="item" data-slide-number="10">
                                <img src="http://placehold.it/1200x480&amp;text=eleven" class="img-responsive">
                            </div>
                        </div>
                    </div>
                </div>
 
        </div>
    </div>
    <!--/main slider carousel-->
 
</div>
[HTML] pobierz, plaintext 

Oraz do tego taki kod.

[JAVASCRIPT] pobierz, plaintext 
$('#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');
});
[JAVASCRIPT] pobierz, plaintext 

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

[mar1aczi]

Co masz pod zmienną "id_selector" (linia 7 Twojego javascriptu)? Jakie zadanie ma spełniać linia poniżej, linia 8?

[4lex]

Nie do końca wiedziałem, bo to gotowiec, ale już wszystko rozumiem, dzięki za naprowadzenie, działa