2014-02-28 37 views
2

我有一個Bootstrap旋轉木馬和縮略圖指示器,但我不知道爲什麼總是選擇第二個縮略圖。我使用的引導3.0選擇了Bootstrap指標縮略圖

這裏是小提琴

http://jsfiddle.net/modaloda/xuhP9/

$('#myCarousel').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); 
$('#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'); 
}); 

希望你能幫助我

回答

1

這裏是一個解決您的問題。

解決方案:jsfiddle

舊代碼

<div class="item" data-slide-to="1"> 
    <img src="http://placehold.it/1200x480/888/FFF" class="img-responsive"> 
</div> 

新代碼

<div class="item" data-slide-number="1"> 
    <img src="http://placehold.it/1200x480/888/FFF" class="img-responsive" /> 
</div> 

你的錯誤是錯誤的分配類數據載玻片到= 「1」 。我更換爲data-slide-number =「1」

另一個關閉全部< img>標記正確。其亮點在於無效的編碼驗證。

+0

謝謝,這真的有用! –