Bootstrap 3 Carousel不起作用.(是的,我在Bootstrap之前加载了jQuery)

Question

Bootstrap 3 Carousel不起作用.(是的,我在Bootstrap之前加载了jQuery)

Dav*_*ers 10 jquery carousel twitter-bootstrap twitter-bootstrap-3

我正在将一个应用程序转换为Bootstrap 3.这是我的样本轮播页面的代码.是的,我在加载Bootstrap.js之前加载了jQuery.无论出于何种原因,旋转木马根本不起作用.具体来说:上一个/下一个按钮不起作用,并且轮播不会自动滑动到下一张幻灯片.

测试:

Safari 6.0.5
Chrome 28.0.1500.95
Firefox 23.0

...在Mac OS X 10.8.4上

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!--[if lt IE 9]>
        <script src="" alt-src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <script src="http://code.jquery.com/jquery.js"></script>

    <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap-glyphicons.css" type="text/css">

    <title>Carousel Test</title>
    <meta name="description" content="">
    <meta name="keywords" content="">

    <script>
        // Added this just so I didn't have to wait 5 seconds to see if the transition worked. //
        $(document).ready(function() {
            $('#Carousel').carousel({
                interval:   1000
            });
        });
    </script>
</head>

<body>
    <div id="Carousel" class="carousel slide">
        <ol class="carousel-indicators">
            <li data-target="Carousel" data-slide-to="0" class="active"></li>
            <li data-target="Carousel" data-slide-to="1"></li>
            <li data-target="Carousel" data-slide-to="2"></li>
        </ol>

        <div class="carousel-inner">
            <div class="item active">
                <img src="img/Carousel/001.jpg">
            </div>
        </div>

        <div class="carousel-inner">
            <div class="item">
                <img src="img/Carousel/002.jpg">
            </div>
        </div>

        <div class="carousel-inner">
            <div class="item">
                <img src="img/Carousel/003.jpg">
            </div>
        </div>

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

Run Code Online (Sandbox Code Playgroud)

任何人都知道为什么这不起作用？

Answer 1

Zim*_*Zim 6

试试里面carousel-inner有多个items ..

<div id="Carousel" class="carousel slide">
        <ol class="carousel-indicators">
            <li data-target="Carousel" data-slide-to="0" class="active"></li>
            <li data-target="Carousel" data-slide-to="1"></li>
            <li data-target="Carousel" data-slide-to="2"></li>
        </ol>

        <div class="carousel-inner">
            <div class="item active">
                <img src="img/Carousel/001.jpg">
            </div>
            <div class="item">
                <img src="img/Carousel/002.jpg">
            </div>
            <div class="item">
                <img src="img/Carousel/003.jpg">
            </div>
        </div>

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

Run Code Online (Sandbox Code Playgroud)

演示:http://bootply.com/72622

归档时间：	12 年，9 月前
查看次数：	33812 次
最近记录：	9 年，10 月前