2017-06-16 111 views
0

我有一個愚蠢的問題,當它有超過10張幻燈片時,稍微定製的Bootstrap旋轉木馬。點擊縮略圖時,雙數的幻燈片沒有註冊?Bootstrap旋轉木馬不識別幻燈片超過10

<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'); 
    }); 
}); 

可能很簡單的東西。任何幫助讚賞。提前致謝!

+0

請把您的完整代碼上codepen.io –

+0

無論如何,我建議你總是使用parseInt函數與基數,這樣的:ID = parseInt函數(ID,10);無法確定這是否可以解決您的問題,但通常會成爲錯誤的根源。 –

+0

謝謝,這似乎已經伎倆 – user2274014

回答

0

添加基數parseInt函數:

id = parseInt(id, 10); 
相關問題