具有动态项目的Bootstrap Carousel不会滑动 [英] Bootstrap Carousel with dynamic items does not slide

问题描述

我正在使用股票自举轮播:

I'm using the stock bootstrap carousel:

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

通过单击轮播中的锚标记，将新的.item注入到.carousel-inner中.注入.item后(正常工作)，圆盘传送带应滑至该.item.但是，什么也没发生.

By clicking on an anchor tag inside the carousel a new .item is injected to the .carousel-inner. After the .item is injected (which works fine) the carousel should slide to that .item. However, nothing happens.

<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);，也没有任何反应.如果我在服务器上的代码中直接添加项目，则一切正常.

Even if I use $("#main-navigation-carousel").carousel(1); in the browser console nothing happens. If I add items right in the code on the server everything works fine.

推荐答案

删除轮播数据，然后再次触发该数据即可！

Removing the carousel data and then triggering it again does the job!

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

由于转盘不应自动滑动，因此使用.carousel("pause").removeData()很重要.

Since the carousel should not auto slide it is important to use .carousel("pause").removeData().

这篇关于具有动态项目的Bootstrap Carousel不会滑动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！