Question

当它有超过10张幻灯片时，我有一个稍微定制的Bootstrap轮播的傻问题。单击缩略图时，双图中的幻灯片不会注册？

<div class="col-md-12" id="slider">
  <div id="theGallery" class="carousel slide" data-ride="carousel" data-interval="false">
    <div class="carousel-inner">
      <div class="item active" data-slide-number="0">
        <div class="desc">
          <p>This is image 1</p>
        </div>
        <img src="slide-1.jpg" class="img-responsive"> </div>

      <!-- ... 2,3, 4 and so on -->

      <div class="item" data-slide-number="10">
        <div class="desc">
          <p>This is image 11</p>
        </div>
        <img src="slide-11.jpg" class="img-responsive"> </div>
    </div>
    <a class="left carousel-control" href="#theGallery" role="button" data-slide="prev"> <span>Previous</span> </a> <a class="right carousel-control" href="#theGallery" role="button" data-slide="next"> <span>Next</span> </a> </div>
</div>

<!-- Thumbnails -->
  <div class="thumbs hidden-sm hidden-xs">
    <div class="width-auto" id="slider-thumbs">
      <ul class="list-inline">
        <li> <a id="carousel-selector-0" class="selected"> <img src="slide-1.jpg" class="img-responsive"> </a></li>
        <!-- ... 2,3, 4 and so on -->
        <li> <a id="carousel-selector-10" class=""> <img src="slide-11.jpg" class="img-responsive"> </a></li>
      </ul>
    </div>
  </div>

$(document).ready(function() {
    $('#theGallery').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);
  $('#theGallery').carousel(id);
  $('[id^=carousel-selector-]').removeClass('selected');
  $(this).addClass('selected');
});

// when the carousel slides, auto update
$('#theGallery').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');
  });
});

可能非常简单。任何帮助赞赏。提前谢谢！

Answer 1

将基数添加到parseInt：

id = parseInt(id, 10);

Bootstrap轮播无法识别超过10的幻灯片

1 个答案: