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

查看：37
本文介绍了带有动态项目的 Bootstrap Carousel 不会滑动的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在使用库存引导轮播:

通过点击 carousel 内的锚标记，一个新的 .item 被注入到 .carousel-inner.在 .item 被注入(工作正常)之后，carousel 应该滑动到那个 .item.然而，什么也没有发生.

<div class="item" data-id="1"><ul><li><a></a></li>....<li><a></a></li>

<div class="item" data-id="2"><ul><li><a></a></li>....<li><a></a></li>

即使我在浏览器控制台中使用 $("#main-navigation-carousel").carousel(1); 也没有任何反应.如果我在服务器上的代码中添加项目，一切正常.

解决方案

删除轮播数据然后再次触发它就可以了！

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

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

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>

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>

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

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

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

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆