Twitter Bootstrap Carousel 自动循环不起作用答案

【问题标题】：Twitter Bootstrap Carousel auto cycle not workingTwitter Bootstrap Carousel 自动循环不起作用
【发布时间】：2012-03-16 01:26:30
【问题描述】：

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

    <!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>

【问题讨论】：

标签： twitter-bootstrap carousel

【解决方案1】：

您在轮播调用中指向了错误的容器，它应该是图像容器的 id 而不是类；

JS ^固定

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

【讨论】：

非常感谢！如果可以的话，我会提升你的代表，但我还没有到那里！犯了这么一个小错误我觉得很傻！
@AlexFlood 我花了一段时间才看到它，但它发生在我们所有人身上:)

【解决方案2】：

参考上述答案，您也可以使用一个类。您只需将 ID 放入其中，就好像它是一个班级一样。如果你这样做了：

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

它会工作得很好。

【讨论】：