引导轮播的问题

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"> div 之后关闭它。

编辑：

在单击一个拇指后如何读取幻灯片编号也存在问题。只需像这样将 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