为什么Twitter Bootstrap Carousel在第一次切换后会停止？

Question

为什么Twitter Bootstrap Carousel在第一次切换后会停止？

我正在尝试使用Twitter Bootstrap创建一个Carousel,但我得到了下面的错误,引用了第一次切换/滑动Carousel之后引导到bootstrap.js的第388行.

未捕获的TypeError:无法调用未定义的方法'slice'

我在Ubuntu上使用Chromium浏览器,版本32.0.1700.102 Ubuntu 12.10.

这是我正在使用的HTML.它几乎是来自http://getbootstrap.com/javascript/#carousel的副本

<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Corousel Example</title>

        <!-- Bootstrap -->
        <link href="css/bootstrap.min.css" rel="stylesheet">

        <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
          <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>
    <body>                
        <!-- Carousel START -->
        <!-- Indicators -->
        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators">
                <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                <li data-target="#carousel-example-generic" data-slide-to="2"></li>
            </ol>

            <!-- Wrapper for sliders -->
            <div class="carousel-inner">
                <div class="item-active">
                    <img src="http://placehold.it/1200x480" alt="1">
                    <div class="carousel-caption">
                        <p>Caption 1</p>
                    </div>
                </div>
                <div class="item">
                    <img src="http://placehold.it/1200x480" alt="2">
                    <div class="carousel-caption">
                        <p>Caption 2</p>
                    </div>
                </div>
                <div class="item">
                    <img data-src="http://placehold.it/1200x480" alt="3">
                    <div class="carousel-caption">
                        <p>Caption 3</p>
                    </div>
                </div>
            </div>

            <!-- Control -->
            <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left"></span>
            </a>
            <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right"></span>
            </a>
        </div>
        <!-- Carousel END-->
        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="js/jquery.min.js"></script>
        <!-- Include all compiled plugins (below), or include individual files as needed -->
        <script src="js/bootstrap.js"></script>
    </body>
</html>

Run Code Online (Sandbox Code Playgroud)

这是上面HTML 的JSFiddle.

有人可以让我知道我做错了什么吗？

Answer 1

ysf*_*qbl 10

所以这是一个非常愚蠢的错误.我已经使用class="item-active",而不是class="item active" in the div下<div class="carousel-inner">

这是解决方案的JSFiddle.

下面的代码显示了更改的位置.

<!-- Wrapper for sliders -->
<div class="carousel-inner">
    <div class="item active">
         <img src="http://placehold.it/1200x480" alt="1">
         <div class="carousel-caption">
              <p>Caption 1</p>
         </div>
    </div>

Run Code Online (Sandbox Code Playgroud)

归档时间：	11 年，9 月前
查看次数：	4967 次
最近记录：	11 年，4 月前