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>

Twitter Bootstrap轮播不会重新循环

1 个答案: