为什么Twitter Bootstrap轮播在第一次切换后停止？

我正在尝试使用Twitter Bootstrap创建一个传送带，但是在传送带的第一个切换/幻灯片后，我得到了下面的错误，引用了bootstrap.js的第388行。为什么Twitter Bootstrap轮播在第一次切换后停止？

Uncaught TypeError: Cannot call method 'slice' of undefined

我在Ubuntu上使用Chromium浏览器，版本32.0.1700.102 Ubuntu 12.10。

这是我使用的HTML。这是一个很值得从

<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>

副本这里是JSFiddle上面的HTML。

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

来源

2014-02-22 ysfiqbl

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

来源

2014-02-22 19:41:06 ysfiqbl

您还可以，如果你忘记了class="item"或拼错得到这样的错误呢

来源

2014-03-27 16:55:37 Samiullah

实际上有两个不同的类名。你写作一门课。

<div class="item-active">

你应该拆分它们。因为引导程序js在滑动横幅时删除或添加类“活动”。

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

来源

2014-07-11 11:15:34 KnowGe

为什么Twitter Bootstrap轮播在第一次切换后停止？

回答

相关问题