ブートストラップカルーセルが10以上のスライドを認識しない

Question

スライドが10個を超えると、少しカスタマイズされたブートストラップカルーセルで愚かな問題が発生します。サムネイルをクリックすると2桁のスライドが登録されていませんか？

<div class="col-md-12" id="slider"> 
    <div id="theGallery" class="carousel slide" data-ride="carousel" data-interval="false"> 
    <div class="carousel-inner"> 
     <div class="item active" data-slide-number="0"> 
     <div class="desc"> 
      <p>This is image 1</p> 
     </div> 
     <img src="slide-1.jpg" class="img-responsive"> </div> 

     <!-- ... 2,3, 4 and so on --> 

     <div class="item" data-slide-number="10"> 
     <div class="desc"> 
      <p>This is image 11</p> 
     </div> 
     <img src="slide-11.jpg" class="img-responsive"> </div> 
    </div> 
    <a class="left carousel-control" href="#theGallery" role="button" data-slide="prev"> <span>Previous</span> </a> <a class="right carousel-control" href="#theGallery" role="button" data-slide="next"> <span>Next</span> </a> </div> 
</div> 

<!-- Thumbnails --> 
    <div class="thumbs hidden-sm hidden-xs"> 
    <div class="width-auto" id="slider-thumbs"> 
     <ul class="list-inline"> 
     <li> <a id="carousel-selector-0" class="selected"> <img src="slide-1.jpg" class="img-responsive"> </a></li> 
     <!-- ... 2,3, 4 and so on --> 
     <li> <a id="carousel-selector-10" class=""> <img src="slide-11.jpg" class="img-responsive"> </a></li> 
     </ul> 
    </div> 
    </div> 

$(document).ready(function() { 
    $('#theGallery').carousel({ 
    interval: 4000 
}); 

// 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); 
    $('#theGallery').carousel(id); 
    $('[id^=carousel-selector-]').removeClass('selected'); 
    $(this).addClass('selected'); 
}); 

// when the carousel slides, auto update 
$('#theGallery').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'); 
    }); 
}); 

おそらく、本当にシンプルなもの。どんな助けもありがたい。前もって感謝します！

Answer 1

はのparseIntに基数を追加します。

id = parseInt(id, 10);