启动引导轮播已暂停？答案

【问题标题】：Start Bootstrap Carousel paused?启动引导轮播已暂停？
【发布时间】：2014-05-29 10:04:02
【问题描述】：

与此极为相似：Preventing twitter bootstrap carousel from auto sliding on page load，除了这对我不起作用。

我有这种设置：

<div id="carousel-example-generic" class="carousel slide" 
    data-ride="carousel" data-interval="5000" data-wrap="1">
  <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
      <li data-target="#carousel-example-generic" data-slide-to="1" class=""></li>
    </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner">
      <div class="item active">
    <a href="fg">      <img src="x" alt="Slide 0">
    </a>    </div>
      <div class="item ">
    <a href="sd">      <img src="x" alt="Slide 1">
    </a>    </div>
    </div>

    <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
  </div>

用JS：

$(function(){ $('.carousel').carousel('pause'); });

但滑块仍会在页面加载时继续自动滑动。我似乎无法获得它，因此它在页面加载时暂停，但在使用时会自动滑动。

我已经尝试了很多方法，例如取出 data-ride（永久停止它）并更改 class 无济于事。

有人知道怎么做吗？

P.S：按照bootstrap carousel pause not working 中的示例调用 pause 确实有效，所以这似乎是 pause 的问题。

【问题讨论】：

你是否另外设置了 data-interval 为 false ？这样做会导致滑块仅在您单击控件时才会前进。这是你想要发生的事情吗？
@jme11 是的，但这样做会永久停止骑行
那么你到底想发生什么？您希望它不循环，然后在什么时候开始循环？

标签： javascript html twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

从您的示例中删除 data-ride 属性：

<div id="carousel-example-generic" class="carousel slide" data-interval="500">

根据http://getbootstrap.com/javascript/#carousel的文档：

data-ride="carousel" 属性用于在页面加载时将轮播标记为动画。

然后，在需要时使用“循环”启动轮播。在这里，我使用点击事件处理程序开始：

    $('.carousel').on('click', function() {
        $('.carousel').carousel('cycle');
    });

【讨论】：