Bootstrap Carousel 不会自动启动循环答案

【问题标题】：Bootstrap Carousel Wont Start Cycle AutomaticlyBootstrap Carousel 不会自动启动循环
【发布时间】：2013-07-05 19:24:31
【问题描述】：

我一直在研究我的轮播，现在它似乎可以工作了。

它开始循环，但不是在我将光标悬停在它上面之前。如何让它自动开始循环，这样人们就不必悬停旋转木马了。

这是我的代码：

<div id="slider" class="carousel slide">
 <div class="carousel-inner">
  <div class="item active">
   <img src="img/slide1.jpg" id="picture">
   <div class="carousel-caption">
   <center><h4>ADD TEXT LATER</h4>
   <p>ADD TEXT LATER</p></center>
  </div>
 </div>
 <div class="item">
  <img src="img/slide2.jpg" id="picture">
  <div class="carousel-caption">
  <center><h4>ADD TEXT LATER</h4>
  <p>ADD TEXT LATER</p></center>
 </div>
</div>
 <div class="item">
  <img src="img/slide3.png" id="picture">
  <div class="carousel-caption">
  <center><h4>ADD TEXT LATER</h4>
  <p>ADD TEXT LATER</p></center>
 </div>
</div>
  <div class="item">
  <img src="img/slide4.png" id="picture">
  <div class="carousel-caption">
  <center><h4>ADD TEXT LATER</h4>
  <p>ADD TEXT LATER</p></center>
 </div>
</div>
</div>

<a class="carousel-control left"href="#slider" data-slide="prev">&lsaquo;</a>
<a class="carousel-control right"href="#slider" data-slide="next">&rsaquo;</a>
</div>

<script>
$('.carousel').carousel({
  interval: 1000
})
</script>

<script src="js/bootstrap-carousel.jss"></script>

【问题讨论】：

谁能帮帮我？

标签： html twitter-bootstrap carousel

【解决方案1】：

除了添加占位符图像外，我还使用了您的确切 HTML，它似乎对我来说可以正常工作 @http://www.bootply.com/66558。

也许您可以仔细检查您的 CSS 和 JS 文件是否一切正常，或者尝试使用 CDN versions for troubleshooting

祝你好运！

编辑

如果上述方法仍然不适合您，请尝试使用

进行初始化

$(document).ready(function () {
$('.carousel').carousel({
    interval: 1000
});

$('.carousel').carousel('cycle');
});

观看直播：http://www.bootply.com/66559

【讨论】：

【解决方案2】：

它似乎与“循环”一起工作，但我该如何更改间隔呢？如果我添加循环，它会很快。

编辑

没关系，我只是从 1000 到 10000 的区间，现在它似乎工作得很好。谢谢你，先生！

【讨论】：

【解决方案3】：

仍然没有帮助我，也没有浏览 git hub 讨论。每个人似乎都没有看到当鼠标在容器上时轮播真的暂停的真正问题......所以我不得不通读 .carousel 文档它真的在那里......暂停属性必须设置为null或默认设置为“悬停”，这将暂停它...... 所以对我来说这是解决方案：

添加间隔，null设置暂停，然后手动调用轮播

<script>
  $(document).ready(function () {
$('.carousel').carousel({
    interval: 3100,
    pause:null
});

$('.carousel').carousel('cycle');
});  

</script>

【讨论】：

【解决方案4】：

我不得不为轮播启动功能添加延迟。由于某种原因，它在路由到另一个页面视图后没有启动。

这就是我的诀窍：

<script>
setTimeout(function() {
  $('.carousel').carousel();
}, 3000);  
</script>

【讨论】：