Question

我使用bootstrap 3，我的旋转木马有问题。它不会自动滑动。但如果我向右或向左单击它可以工作并自动滑动工作。

我的代码：

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" style="height:344px;">
                      <!-- Indicators -->
                      <ol class="carousel-indicators">
                        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                      </ol>

                      <!-- Wrapper for slides -->
                      <div class="carousel-inner" role="listbox">
                        <div class="item active">
                          <img src="assets/img/img1.jpg" alt="...">
                          <div class="carousel-caption">    
                          </div>
                        </div>
                        <div class="item">
                          <img src="assets/img/img2.jpg" alt="...">
                          <div class="carousel-caption">
                          </div>
                        </div>
                      </div>

                      <!-- Controls -->
                      <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                        <span class="sr-only">Previous</span>
                      </a>
                      <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                        <span class="sr-only">Next</span>
                      </a>
                    </div>

感谢您的帮助：）

Answer 1

实际上这是自动的，你只需要等到第一张幻灯片移出。如果要管理间隔，可以使用jQuery，如提供的示例（从代码开始）：

 var $ = jQuery.noConflict();
  $(document).ready(function() { 
      $('#carousel-example-generic').carousel({ interval: 5000, cycle: true });
  });

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" style="height:344px;">
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
        <div class="item active">
            <img src="assets/img/img1.jpg" alt="...">
            <div class="carousel-caption">
            </div>
        </div>
        <div class="item">
            <img src="assets/img/img2.jpg" alt="...">
            <div class="carousel-caption">
            </div>
        </div>
    </div>

    <!-- Controls -->
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>

Answer 2

您需要使用JavaScript初始化轮播。

将此添加到您的代码中：

<script type="text/javascript">
$(document).ready(function(){
 $('carousel-example-generic').carousel({
        interval: 2000
 })

});
</script>

Bootstrap轮播没有加载

2 个答案: