it-swarm.com.ru

Bootstrap 3 Карусель не будет работать. (Да, у меня загружен jQuery перед загрузкой)

Я конвертирую приложение в Bootstrap 3. Вот код для всей моей страницы с каруселью. Да, у меня загружен jQuery до загрузки Bootstrap.js. По какой-то причине карусель просто не будет работать. В частности: кнопки «предыдущий/следующий» не работают, и карусель автоматически не перемещается к следующему слайду.

Проверено на:

  • Safari 6.0.5
  • Chrome 28.0.1500.95
  • Firefox 23.0

... в Mac OS X 10.8.4

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">

    <!--[if lt IE 9]>
        <script src="" alt-src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <script src="http://code.jquery.com/jquery.js"></script>

    <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap-glyphicons.css" type="text/css">

    <title>Carousel Test</title>
    <meta name="description" content="">
    <meta name="keywords" content="">

    <script>
        // Added this just so I didn't have to wait 5 seconds to see if the transition worked. //
        $(document).ready(function() {
            $('#Carousel').carousel({
                interval:   1000
            });
        });
    </script>
</head>

<body>
    <div id="Carousel" class="carousel slide">
        <ol class="carousel-indicators">
            <li data-target="Carousel" data-slide-to="0" class="active"></li>
            <li data-target="Carousel" data-slide-to="1"></li>
            <li data-target="Carousel" data-slide-to="2"></li>
        </ol>

        <div class="carousel-inner">
            <div class="item active">
                <img src="img/Carousel/001.jpg">
            </div>
        </div>

        <div class="carousel-inner">
            <div class="item">
                <img src="img/Carousel/002.jpg">
            </div>
        </div>

        <div class="carousel-inner">
            <div class="item">
                <img src="img/Carousel/003.jpg">
            </div>
        </div>

        <a class="left carousel-control" href="#Carousel" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
        </a>
        <a class="right carousel-control" href="#Carousel" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
        </a>
    </div>
</body>
</html>

У кого-нибудь есть понимание, почему это не работает?

10
David Byers

Попробуйте один carousel-inner с несколькими items внутри ..

<div id="Carousel" class="carousel slide">
        <ol class="carousel-indicators">
            <li data-target="Carousel" data-slide-to="0" class="active"></li>
            <li data-target="Carousel" data-slide-to="1"></li>
            <li data-target="Carousel" data-slide-to="2"></li>
        </ol>

        <div class="carousel-inner">
            <div class="item active">
                <img src="img/Carousel/001.jpg">
            </div>
            <div class="item">
                <img src="img/Carousel/002.jpg">
            </div>
            <div class="item">
                <img src="img/Carousel/003.jpg">
            </div>
        </div>

        <a class="left carousel-control" href="#Carousel" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
        </a>
        <a class="right carousel-control" href="#Carousel" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
        </a>
    </div>

Демо: http://bootply.com/72622

5
Zim

В этом коде есть еще одна ошибка, заключающаяся в том, что индикаторы карусели не активируются. Это должны быть ссылки, которые приведут вас к соответствующей панели.

Вам нужно добавить хештег к цели данных:

<li data-target="#Carousel" data-slide-to="0" class="active"></li>
<li data-target="#Carousel" data-slide-to="1"></li>
<li data-target="#Carousel" data-slide-to="2"></li>
3
Stephen Hess

Это должно помочь кому-то, кто застрял как я, несмотря на то, что правильно написал весь код. Я пытался найти ошибку в коде, но все было хорошо. Затем я проверил свои файлы javascript и заметил, что каким-то образом их тип изменился на .js.txt . Поэтому я просто изменил его на .js и это сработало.

Удачного кодирования!

0
Vishal Chhatwani