Question

我一直在使用twitter bootstrap，没有任何问题，直到我开始使用carousel插件。旋转木马控件工作正常，过渡平稳，但不会自动循环！我搜索了很多年，但找不到任何解决方案。如果有人有任何想法，请告诉我，我将非常感激。

    <!DOCTYPE html>
    <html lang="en">
<head>
    <meta charset="utf-8">
    <title>Your Income Expert</title>
    <link rel="stylesheet/less" type="text/css" href="less/style.less">
    <script src="js/less.js" type="text/javascript"></script>
    <script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
    <script src="js/bootstrap-tab.js" type="text/javascript"></script>
    <script src="js/bootstrap-carousel.js" type="text/javascript"></script>
    <script src="js/bootstrap-transition.js" type="text/javascript"></script>
</head>

<body>
    <div class="container">
        <div class="row">

            <div class="span3">
                <div class="well sidebar-nav">

                    <ul class="nav nav-list">
                        <li><h2>Your Logo Here</h2></li>
                        <li class="nav-header">Main</li>
                        <li class="active"><a href="index.html">Home</a></li>
                        <li><a href="company.html">Company</a></li>
                        <li><a href="services.html">Services</a></li>
                        <li><a href="#">Books</a></li>
                        <li><a href="#">Contact</a></li>
                        <li class="nav-header">Keep In Touch</li>
                        <li><a href="#">Facebook</a></li>
                        <li><a href="#">Twitter</a></li>
                        <li><a href="#">LinkedIn</a></li>
                        <li><a href="#">Blog</a></li>
                    </ul>
                </div><!--/.well -->
            </div><!--/span-->

            <div class="span9">
                <div class="well">

                    <div id="headerCarousel" class="carousel slide">
                        <div id="carousel-inner">
                            <div class="active item"><a href="#"><img src="broker.png" alt="" /></a></div>
                            <div class="item"><a href="#"><img src="2.png" alt="" /></a></div>
                            <div class="item"><a href="#"><img src="3.png" alt="" /></a></div>
                        </div>
                        <a class="carousel-control left" href="#headerCarousel" data-slide="prev">&lsaquo;</a>
                        <a class="carousel-control right" href="#headerCarousel" data-slide="next">&rsaquo;</a>
                    </div>

                    <ul class="nav nav-tabs">
                        <li class="active"><a data-toggle="tab" href="#home">Service 1</a></li>
                        <li><a data-toggle="tab" href="#profile">Service 2</a></li>
                        <li><a data-toggle="tab" href="#messages">Service 3</a></li>
                        <li><a data-toggle="tab" href="#settings">Service 4</a></li>
                    </ul>

                    <div class="tab-content">
                        <div class="tab-pane active" id="home">
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla laoreet neque sit amet libero pulvinar vitae consequat ante adipiscing. Nam vehicula arcu in diam vehicula pretium. Nulla volutpat tellus ut tellus consectetur blandit egestas est ullamcorper. Morbi adipiscing suscipit quam eget eleifend. Nam est turpis, blandit sed vehicula ut, aliquet quis turpis. Nulla et ligula in.</p>
                        </div>
                        <div class="tab-pane" id="profile">
                            <p>Testing the profile tab.</p>
                        </div>
                        <div class="tab-pane" id="messages">
                            <p>Testing the messages tab</p>
                        </div>
                        <div class="tab-pane" id="settings">
                            <p>Testing the settings tab.</p>
                        </div>
                    </div>

                </div>
            </div>
        </div>

    </div>
    <script>
        $('.headerCarousel').carousel({ interval: 1200 })
    </script>
</body>

Answer 1

您指向轮播中的错误容器，它应该是图像容器的ID而不是类;

JS ^已修复

$('#headerCarousel').carousel({
    interval: 1200
});

Answer 2

参考上面的答案，你也可以使用一个类。您只需将ID放入类中即可。如果你做了：

$('.carousel.slide').carousel({
    interval: 1200
});

它会运作得很好。

Twitter Bootstrap Carousel自动循环不起作用

2 个答案: