jquery - 带有动态项目的 Bootstrap 轮播不滑动

Question

我正在使用库存 Bootstrap 轮播:

<div id="main-navigation-carousel" class="carousel slide">
  <div class="carousel-inner">
    <div class="item active" data-id="0">
      <ul>
        <li><a></a></li>
        ....
        <li><a></a></li>
      </ul>
    </div>
  </div>
</div>

通过单击轮播内的 anchor 标记，新的 .item 将被注入(inject)到 .carousel-inner 中。注入(inject) .item 后(效果很好)，轮播应该滑动到该 .item。然而，什么也没有发生。

<div id="main-navigation-carousel" class="carousel slide">
  <div class="carousel-inner">
    <div class="item active" data-id="0">
      <ul>
        <li><a></a></li>
        ....
        <li><a></a></li>
      </ul>
    </div>
    <div class="item" data-id="1">
      <ul>
        <li><a></a></li>
        ....
        <li><a></a></li>
      </ul>
    </div>
    <div class="item" data-id="2">
      <ul>
        <li><a></a></li>
        ....
        <li><a></a></li>
      </ul>
    </div>
  </div>
</div>

即使我在浏览器控制台中使用 $("#main-navigation-carousel").carousel(1); 也不会发生任何事情。如果我在服务器上的代码中添加项目，一切都会正常工作。

Answer 1

删除轮播数据然后再次触发即可完成工作!

$("#main-navigation-carousel").carousel("pause").removeData();
$("#main-navigation-carousel").carousel(target_slide_index);

由于轮播不应自动滑动，因此使用 .carousel("pause").removeData() 非常重要。