帶有縮略圖的引導輪播

Question

我有一個帶有html內容顯示滑動的自舉輪播。

這里的問題是，它可以正常工作到第9個縮略圖，但是當單擊第11和第12個縮略圖時，它會滑回到第一個內容框，而不是各自的ID。

這是使用的腳本

$('#myCarousel').carousel({
              pause: true,
              interval: false
            });

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

            $('#myCarousel').bind('slide.bs.carousel', function (e) {
              var slideFrom = $(this).find('.active').index();
              var videoContent = $('.item[data-slide-number='+slideFrom+'] .embed-responsive');
              videoContent.html( videoContent.html() );
            });

            // when the carousel slides, auto update
            $('#myCarousel').on('slid.bs.carousel', 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

采用：

var parts = id_selector.split("-");
var id = parts[parts.length - 1]

代替

var id = id_selector.substr(id_selector.length -1);

因為如果選擇10 ，則只會獲得id最后一個字符，即0 。

相反，我在-之后輸入了最后一個字/值。

工作小提琴

Answer 2

在這條線

var id = id_selector.substr(id_selector.length -1);

您說的是id_selector.length-1，它將始終給出id_selector的最后一個字符，因此，在id_selector_10情況下，您將id設為0，而id_selector_11也是如此。

如果將其替換為以下代碼，它將可以正常工作。

var idIndex = id_selector.lastIndexOf('-') + 1;// Get the index of character where digit starts
var id = id_selector.substr(idIndex); //Get id from that index

更新的演示

Answer 3

將以下行從

var id = id_selector.substr(id_selector.length -1);
id = parseInt(id);

為此： （id_selector.length-2）

var id = id_selector.substr(id_selector.length -2);
id = parseInt(id);

您唯一要做的就是像這樣重新編號整個輪播ID

<li> <a id="carousel-selector-00" class="selected">
<li> <a id="carousel-selector-01">
<li> <a id="carousel-selector-02">
<li> <a id="carousel-selector-03">
<li> <a id="carousel-selector-04">............

這樣應該可以解決您的問題！ 該長度已被采用並減去1。但是現在，由於要減去2個字符才能找到ID，因此您將得到00和01，然后到11和12。