jquery - Bootstrap 轮播的问题

Question

我在使用 Bootstrap 轮播时遇到问题。我正在使用在 Bootply 上找到的一个示例，该示例使用缩略图导航来选择可见的图像。我遇到的问题是，一旦项目 id 增加到两位数，jQuery 中的子字符串行就会阻止它正确显示。我认为是因为它切断了其中一位数字。

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

Answer 1

问题是你的html div <div class="carousel-inner">关门时间还早。您应该在上次 <div class="item" data-slide-number="12"> 之后关闭它分区

编辑:

单击一个拇指后如何重新播放幻灯片编号也存在问题。只需将 data-slide-number 属性添加到每个 li 中，如下所示:

<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