Question

我使用Bootstrap 3实现了一个Twitter Bootstrap轮播。我正在尝试自动启动轮播而不能正常工作。

我的java脚本代码：

<script type="text/javascript">
var $ = jQuery.noConflict(); 
$(document).ready(function()  
{ $('#carousel-67566').carousel({ interval: 3000, cycle: true });
 });
</script>

和HTML代码

<div class="carousel slide" id="carousel-67566">
                <ol class="carousel-indicators">
                    <li class="active" data-slide-to="0" data-target="#carousel-67566">
                    </li>
                    <li data-slide-to="1" data-target="#carousel-67566">
                    </li>
                    <li data-slide-to="2" data-target="#carousel-67566">
                    </li>
                </ol>
                <div class="carousel-inner">
                    <div class="item active">
                        <img alt="" src="http://lorempixel.com/1600/500/sports/1" />
                        <div class="carousel-caption">
                            <h4>
                                First Thumbnail label
                            </h4>
                            <p>
                                Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
                            </p>
                        </div>
                    </div>
                    <div class="item">
                        <img alt="" src="http://lorempixel.com/1600/500/sports/2" />
                        <div class="carousel-caption">
                            <h4>
                                Second Thumbnail label
                            </h4>
                            <p>
                                Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
                            </p>
                        </div>
                    </div>

                </div> <a class="left carousel-control" href="#carousel-67566" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a> <a class="right carousel-control" href="#carousel-67566" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
            </div>

我也想停止显示箭头。

Answer 1

在加载Jquery之后编写代码，或者在正文结束标记之前写下

    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <script type="text/javascript">// <![CDATA[
     var $ = jQuery.noConflict(); 
      $(document).ready(function()  { 
        $('#myCarousel').carousel({ interval: 3000, cycle: true }); 
      });
    </script>
    </body>

如果您不想显示导航控制器。只需从代码中删除此行

即可

    <a class="left carousel-control" href="#carousel-67566" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span></a> 
    <a class="right carousel-control" href="#carousel-67566" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span></a>

Answer 2

Bootstrap 3 Carousel将在页面加载时开始滑动轮播

＆＃13;

<script type="text/javascript">
$(document).ready(function(){
$('#myCarousel').carousel({interval: 3000});
});
</script>

＆＃13;

To change how long between slides and loading change the interval number ;)

＆＃13;

Bootstrap 3轮播自动启动不起作用

2 个答案: