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&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

Bootstrap Carousel的问题

1 个答案: