Почему Twitter Bootstrap карусель останавливается после первого переключения?

Я пытаюсь создать карусель с щелевым бутстрапом, но я получаю ошибку ниже, ссылаясь на строку 388 bootstrap.js после первого переключения/слайда карусели.Почему Twitter Bootstrap карусель останавливается после первого переключения?

Uncaught TypeError: Cannot call method 'slice' of undefined

Я использую Chromium браузер на Ubuntu, версия 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">

Вы должны разделить их. Поскольку bootstrap js удаляет или добавляет класс «active», когда он сдвигает баннер.

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

источник

2014-07-11 11:15:34 KnowGe

Почему Twitter Bootstrap карусель останавливается после первого переключения?

ответ

Смежные вопросы