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

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

Uncaught TypeError: Невозможно вызвать метод 'slice' из неопределенного

Я использую браузер Chromium в Ubuntu, версия 32.0.1700.102 Ubuntu 12.10.

Вот HTML-код, который я использую. Это в значительной степени копия с http://getbootstrap.com/javascript/

<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 выше.

Может кто-нибудь, пожалуйста, дайте мне знать, что я делаю не так?

Источник

3 ответа

Решение

Так что это была довольно глупая ошибка. я использовал 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>
Источник

На самом деле есть два разных имени класса. Вы написали как один класс.

<div class="item-active">

Вы должны разделить их. Поскольку bootstrap js удаляет или добавляет класс "активный", когда он перемещает баннер.

<!-- Correct One -->
<div class="item active">
Источник

Вы также можете получить такую ​​ошибку, если вы забудете class="item" или опечатка

Источник
Другие вопросы по тегам