10

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

测试：

  • Safari 6.0.5
  • 铬 28.0.1500.95
  • 火狐 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>

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

4

4 回答 4

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>

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

于 2013-08-07T18:24:34.110 回答
3

此代码中还有另一个错误是轮播指示器不可点击。它们应该是将您带到相应面板的链接。

您需要向数据目标添加主题标签：

<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>
于 2014-01-25T21:49:12.320 回答
0

这是为了帮助那些像我一样被困住的人，尽管正确地编写了所有代码。我试图在代码中找到错误，但一切都很好。然后我检查了我的 javascript 文件并注意到它们的类型以某种方式更改为.js.txt。所以我只是将其更改为.js并且它起作用了。

快乐编码！

于 2016-07-12T17:59:58.637 回答
-1

要使滑块起作用，您必须包括：

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

在文档的底部（在正文结束标记之前）

于 2016-03-09T15:04:33.873 回答