Question

与此极为相似：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调用暂停后的示例实际上有效，所以这似乎是暂停的问题。

Answer 1

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

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

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

data-ride =“carousel”属性用于将轮播标记为从页面加载开始的动画。

然后，使用'循环'来启动您的旋转木马。在这里，我使用click事件处理程序启动它：

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

启动Bootstrap Carousel暂停？

1 个答案: