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

【问题标题】：Bootstrap carousel not recognising slides over 10Bootstrap轮播无法识别超过10张的幻灯片
【发布时间】：2017-06-16 10:55:18
【问题描述】：

当有超过 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');
  });
});

可能真的很简单。任何帮助表示赞赏。提前致谢！

【问题讨论】：

请将您的完整代码放在 codepen.io 上
无论如何，我建议您始终使用带有基数的 parseInt，如下所示： id = parseInt(id, 10);不能确定这是否可以解决您的问题，但它通常会成为错误的根源。
谢谢，好像成功了
太棒了！我已将其作为未来搜索者的答案。

标签： javascript twitter-bootstrap carousel

【解决方案1】：

为 parseInt 添加基数：

id = parseInt(id, 10);

【讨论】：