Question

我正在尝试使用Twitter Bootstrap创建一个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>

以上是HTML的JSFiddle。

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

Answer 1

所以这是一个非常愚蠢的错误。我在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>

Answer 2

实际上有两个不同的类名。你写的是一个班级。

<div class="item-active">

你应该分开它们。因为bootstrap js在滑动横幅时会移除或添加类“active”。

<!-- Correct One -->
<div class="item active">

Answer 3

如果您忘记了class="item"或拼错了

，也会出现此类错误

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

3 个答案: