Twitter Bootstrap轮播不会重新循环(Twitter Bootstrap carousel does not re

Twitter Bootstrap轮播不会重新循环(Twitter Bootstrap carousel does not re-cycle)

我在着陆页上实现了全屏Twitter Bootstrap轮播背景。 实际上，这是我想在stackoverflow上发布的东西，因为我找到的其他版本不能与Bootstrap 3+一起使用。

我希望旋转木马只是保持循环，但它完成一个循环然后返回到第一个图像，不会循环也不可控制。 我从其他地方尝试了很多不同的修复方法。 我尝试过使用CSS和Javascript实现。 我只是无法让它正常工作！

草案在这里： http ： //somethingspecial.kevinmgibbons.com

你知道我做错了什么吗？

HTML：

<div class="container fill"> <div id="myCarousel" class="carousel slide"> <div class="carousel-inner"> <div class="carousel-caption"><!-- replace #s with email address and links to social media pages --> <h1>Title</h1> <p>Text text text</p> <div class="social-icons"> ... </div> </div><!-- /carousel-caption --> <!-- Carousel Images --> <div class="active item"><div class="fill ad1"></div></div> <div class="item"><div class="fill ad2"></div></div> <div class="item"><div class="fill ad3"></div></div> <div class="item"><div class="fill ad4"></div></div> <div class="item"><div class="fill ad5"></div></div> <div class="item"><div class="fill ad6"></div></div> <div class="item"><div class="fill ad7"></div></div> <div class="item"><div class="fill ad8"></div></div> <div class="item"><div class="fill ad9"></div></div> <div class="item"><div class="fill ad10"></div></div> <!-- Carousel Controls/Arrows --> <a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a> <a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a> </div><!-- /.carousel-inner --> </div><!-- /#myCarousel --> </div><!-- /.container --> <!-- Bootstrap Core JavaScript --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/docs.min.js"></script> <!-- Carousel Cycle --> <script type="text/javascript"> $('#myCarousel').carousel({ interval: 3000, cycle: "true", wrap: "true", pause: "false" }) </script>

I've implemented a fullscreen Twitter Bootstrap carousel background on a landing page. Actually, it's something I want to post on stackoverflow since the other versions I found do not work with Bootstrap 3+.

I want the carousel to just keep cycling, but it completes one cycle then returns to the first image and will not cycle nor be controllable. I've tried many different fixes from other places. I've tried using CSS and Javascript implementations. I just can't get it to work right!

Draft here: http://somethingspecial.kevinmgibbons.com

Do you know what I am doing wrong?

HTML:

<div class="container fill"> <div id="myCarousel" class="carousel slide"> <div class="carousel-inner"> <div class="carousel-caption"><!-- replace #s with email address and links to social media pages --> <h1>Title</h1> <p>Text text text</p> <div class="social-icons"> ... </div> </div><!-- /carousel-caption --> <!-- Carousel Images --> <div class="active item"><div class="fill ad1"></div></div> <div class="item"><div class="fill ad2"></div></div> <div class="item"><div class="fill ad3"></div></div> <div class="item"><div class="fill ad4"></div></div> <div class="item"><div class="fill ad5"></div></div> <div class="item"><div class="fill ad6"></div></div> <div class="item"><div class="fill ad7"></div></div> <div class="item"><div class="fill ad8"></div></div> <div class="item"><div class="fill ad9"></div></div> <div class="item"><div class="fill ad10"></div></div> <!-- Carousel Controls/Arrows --> <a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a> <a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a> </div><!-- /.carousel-inner --> </div><!-- /#myCarousel --> </div><!-- /.container --> <!-- Bootstrap Core JavaScript --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/docs.min.js"></script> <!-- Carousel Cycle --> <script type="text/javascript"> $('#myCarousel').carousel({ interval: 3000, cycle: "true", wrap: "true", pause: "false" }) </script>

最满意答案

扩展我的评论，它不工作的原因是因为你在carousel-inner div中有导航控件。 这是代码应该是什么样子：

<div class="container fill"> <div id="myCarousel" class="carousel slide"> <div class="carousel-inner"> <div class="carousel-caption"><!-- replace #s with email address and links to social media pages --> <h1>Title</h1> <p>Text text text</p> <div class="social-icons"> ... </div> </div><!-- /carousel-caption --> <!-- Carousel Images --> <div class="active item"><div class="fill ad1"></div></div> <div class="item"><div class="fill ad2"></div></div> <div class="item"><div class="fill ad3"></div></div> <div class="item"><div class="fill ad4"></div></div> <div class="item"><div class="fill ad5"></div></div> <div class="item"><div class="fill ad6"></div></div> <div class="item"><div class="fill ad7"></div></div> <div class="item"><div class="fill ad8"></div></div> <div class="item"><div class="fill ad9"></div></div> <div class="item"><div class="fill ad10"></div></div> </div><!-- /.carousel-inner --> <!-- Carousel Controls/Arrows --> <a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a> <a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a> </div><!-- /#myCarousel --> </div><!-- /.container --> <!-- Bootstrap Core JavaScript --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/docs.min.js"></script> <!-- Carousel Cycle --> <script type="text/javascript"> $('#myCarousel').carousel({ interval: 3000, cycle: "true", wrap: "true", pause: "false" }) </script>

Expanding on my comment, the reason it wasn't working was because you had the navigation controls inside the carousel-inner div. Here is what the code should look like:

<div class="container fill"> <div id="myCarousel" class="carousel slide"> <div class="carousel-inner"> <div class="carousel-caption"><!-- replace #s with email address and links to social media pages --> <h1>Title</h1> <p>Text text text</p> <div class="social-icons"> ... </div> </div><!-- /carousel-caption --> <!-- Carousel Images --> <div class="active item"><div class="fill ad1"></div></div> <div class="item"><div class="fill ad2"></div></div> <div class="item"><div class="fill ad3"></div></div> <div class="item"><div class="fill ad4"></div></div> <div class="item"><div class="fill ad5"></div></div> <div class="item"><div class="fill ad6"></div></div> <div class="item"><div class="fill ad7"></div></div> <div class="item"><div class="fill ad8"></div></div> <div class="item"><div class="fill ad9"></div></div> <div class="item"><div class="fill ad10"></div></div> </div><!-- /.carousel-inner --> <!-- Carousel Controls/Arrows --> <a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a> <a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a> </div><!-- /#myCarousel --> </div><!-- /.container --> <!-- Bootstrap Core JavaScript --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/docs.min.js"></script> <!-- Carousel Cycle --> <script type="text/javascript"> $('#myCarousel').carousel({ interval: 3000, cycle: "true", wrap: "true", pause: "false" }) </script>