在引导程序中移动幻灯片

时间:2013-04-23 12:33:54

标签: twitter-bootstrap

我正在使用bootstrap的旋转木马,为此我在我的js文件夹中有这个文件。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-carousel.js"></script>
<script src="js/bootstrap-transition.js"></script>
<script src="js/bootstrap-alert.js"></script>
<script src="js/bootstrap-modal.js"></script>
<script src="js/bootstrap-dropdown.js"></script>
<script src="js/bootstrap-scrollspy.js"></script>
<script src="js/bootstrap-tab.js"></script>
<script src="js/bootstrap-tooltip.js"></script>
<script src="js/bootstrap-popover.js"></script>
<script src="js/bootstrap-button.js"></script>
<script src="js/bootstrap-collapse.js"></script>
<script src="js/bootstrap-typeahead.js"></script>

我的旋转木马就是这个。

   <div id="myCarousel" class="carousel slide">
        <!-- Carousel items -->
        <div class="carousel-inner">
            <div class="active item"><img src="img/cabecera/slide1.jpg"></div>
            <div class="item"><img src="img/cabecera/slide3.jpg"></div>
            ...
        </div>
        <!-- Carousel nav -->
        <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
        <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
    </div>

问题是旋转木马没有通过滑动的第一次,我必须按下左箭头或右箭头才能通过滑动,当我按下滑动单独的第一次时。

有什么问题?我想念一些东西。

1 个答案:

答案 0 :(得分:1)

据我了解,这与How can I make the Bootstrap js carousel automatically cycle as soon as the page loads?

的问题相同

根据这个,您的问题的解决方案是一点js代码:

$(document).ready(function () {
    $('.carousel').carousel({
        interval: 3000
    });

    $('.carousel').carousel('cycle');
});