twitter-bootstrap – Twitter Bootstrap Carousel自动循环不工

发布时间：2020-12-18 00:19:57 所属栏目：安全来源：网络整理

导读：我一直在使用twitter bootstrap没有问题,直到我开始使用轮播插件.旋转木马控制器工作正常,并且平滑地转换,但不会自动循环！我搜索了很多年,但找不到任何解决方案.如果有任何想法,请让我知道,我将非常感谢. !DOCTYPE html html lang="en"head meta charset="u

我一直在使用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>

解决方法

你指向你的转盘呼叫中的错误的容器,它应该是你的图像容器的id,而不是一个类;

JS固定

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!