javascript - Twitter Bootstrap 轮播无法回收

Question

我在登陆页面上实现了全屏 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>

Answer 1

扩展我的评论，它不起作用的原因是因为您在 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>