Question

我一直在研究我的旋转木马，它现在似乎正在运作。

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

继承我的代码：

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

Answer 1

除了添加占位符图片之外，我还使用了您的确切HTML，它似乎对我{@ 3}}正常工作。

也许您可以仔细检查CSS和JS文件的所有内容，或者尝试使用http://www.bootply.com/66558

祝你好运！

编辑

如果上述内容仍不适合您，请尝试使用

进行初始化

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

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

查看直播：CDN versions for troubleshooting

Answer 2

它似乎适用于“循环”，但我如何更改间隔呢？如果我添加循环，它会很快。

修改

没关系，我只是把间隔从1000到10000，现在看起来效果很好。谢谢你，先生！

Answer 3

仍然没有帮助我，也没有浏览git hub讨论。当鼠标放在容器上时，每个人似乎都没有看到旋转木马真正暂停的真正问题....所以我不得不通读.carousel文档它确实存在...暂停属性必须设置为null或默认设置为＆＃34; hover＆＃34;会暂停它...... 所以对我来说，这是决议：

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

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

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

</script>

Answer 4

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

这就是我的窍门：

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

Bootstrap Carousel不会自动启动循环

4 个答案: