Bootstrap Carousel的問題

我遇到了Bootstrap carousel的問題。我使用的是我在Bootply上找到的一個使用縮略圖導航來選擇可見圖像的示例。我遇到的問題是，一旦項目id增加到兩位數字，jQuery中的子串行阻止它正確顯示。我假設，因爲它正在切斷其中一個數字。Bootstrap Carousel的問題

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

我不太確定我要去哪裏錯，任何幫助將不勝感激。

這裏是整個Bootply鏈接：http://www.bootply.com/5Ndty8EZZ2

來源

2016-02-08 James Ives

的問題是你的HTML DIV <div class="carousel-inner">已接近年初。你應該在你最後的<div class="item" data-slide-number="12"> div之後關閉它。

編輯：

還有一個問題，你怎麼蘆葦點擊一個拇指後滑數。就在數據幻燈片編號屬性添加到每個立像這樣：

<li> 
    <a id="carousel-selector-1" data-slide-number="1"> 
     <img src="http://placehold.it/80x60&amp;text=two" class="img-responsive"> 
    </a> 
</li>

然後用var id = $(this).attr('data-slide-number');你的點擊函數中：

// handles the carousel thumbnails 
$('[id^=carousel-selector-]').click(function(){ 

    var id = $(this).attr('data-slide-number'); 

    id = parseInt(id); 
    $('#myCarousel').carousel(id); 
    $('[id^=carousel-selector-]').removeClass('selected'); 
    $(this).addClass('selected'); 
});

鏈接：http://www.bootply.com/dqUl7lt89B

來源

2016-02-08 23:27:13 om1

這並不能解決問題。在你的例子中嘗試點擊十三，你會看到相應的幻燈片不顯示。它代表三個。 –

你是對的。您在如何使用幻燈片編號方面也存在問題。我已經更新了我的答案。 – om1

這仍然不起作用。現在唯一可選的是十三個 –

Bootstrap Carousel的問題

回答

相關問題