Bootstrap 3 Карусель не работает

Моя карусель из Bootstrap не отображает мои изображения или не реагирует на элементы управления.

Это мой HTML:

<!DOCTYPE HTML>
<html>
    <head>
        <title>Skates R Us</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <link rel="stylesheet" href="css/global.css">
    </head>

    <body>
        <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a href="#" class="navbar-brand">
                        Skates R Us
                    </a>
                </div>
                <div class="collapse navbar-collapse">
                    <ul class="nav navbar-nav">
                        <li class="active">
                            <a href="index.html">Home</a>
                        </li>
                        <li>
                            <a href="contact.html">Contact / About</a>
                        </li>
                        <li>
                            <a href="shop.html">Shop</a>
                        </li>
                        <li>
                            <a href="new.html">New Products</a>
                        </li>
                        <li>
                            <a href="media.html">Media</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <div id="carousel" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators">
                <li data-target="carousel" data-slide-to="0"></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">
                    <img src="img/slide_1.png" alt="Slide 1">
                </div>
                <div class="item">
                    <img src="img/slide_2.png" alt="Slide 2">
                </div>
                <div class="item">
                    <img src="img/slide_3.png" alt="Slide 3">
                </div>
            </div>
            <a href="#carousel" class="left carousel-control" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left"></span>
            </a>
            <a href="#carousel" class="right carousel-control" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right"></span>
            </a>
        </div>

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script>
            $("#carousel").carousel();
        </script>
    </body>
</html>

Мой CSS:

#carousel {

    margin-top: 50px;

}

.carousel {
    height: 500px;
    margin-bottom: 60px;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
    z-index: 10;
}

/* Declare heights because of positioning of img element */
.carousel .item {
    width: 100%;
    height: 500px;
    background-color: #777;
}
.carousel-inner > .item > img {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100%;
    height: 500px;
}

@media (min-width: 768px) {
    .carousel-caption p {
            margin-bottom: 20px;
            font-size: 21px;
            line-height: 1.4;
    }
}

img {
    background: red;
}

Ошибок в консоли Chrome нет, и код почти такой же, как и в примерах Bootstrap.

Это то, что выглядит на моем сайте: Site

Ответ 1

Здесь есть только две незначительные вещи.

Первый находится в следующих пунктах списка индикаторов карусели:

<li data-target="carousel" data-slide-to="0"></li>

Вам необходимо передать атрибут data-target селектору, который означает, что перед ID должен стоять префикс #. Поэтому измените их на следующее:

<li data-target="#carousel" data-slide-to="0"></li>

Во-вторых, вам нужно дать отправную точку карусели, чтобы и элементы индикатора карусели, и внутренние элементы карусели должны иметь один active класс. Как это:

<ol class="carousel-indicators">
    <li data-target="#carousel" data-slide-to="0" class="active"></li>
    <!-- Other Items -->
</ol>
<div class="carousel-inner">
    <div class="item active">
        <img src="https://picsum.photos/1500/600?image=1" alt="Slide 1" />
    </div>
    <!-- Other Items -->
</div>

Рабочая демонстрация в Fiddle

Ответ 2

Вот изменения, которые необходимо выполнить.

просто замените карусель div на приведенный ниже код

Вы пропустили "#" для цели данных и добавили активный класс для первого элемента

<div id="carousel" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators">
                <li data-target="#carousel" data-slide-to="0"></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/slide_1.png" alt="Slide 1">
                </div>
                <div class="item">
                    <img src="img/slide_2.png" alt="Slide 2">
                </div>
                <div class="item">
                    <img src="img/slide_3.png" alt="Slide 3">
                </div>
            </div>
            <a href="#carousel" class="left carousel-control" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left"></span>
            </a>
            <a href="#carousel" class="right carousel-control" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right"></span>
            </a>
        </div>

Ответ 3

Ну, Bootstrap Carousel имеет различные параметры контроля.

т.е.

Интервал: задает задержку (в миллисекундах) между каждым слайдом.

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

wrap: Указывает, должна ли карусель проходить через все слайды непрерывно или останавливаться на последнем слайде

Для вашей справки:

enter image description here

Для более подробной информации нажмите здесь...

Надеюсь, что это поможет вам :)

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

Ответ 4

Для меня карусель не работала в DreamWeaver CC, предоставляя код на странице "шаблон", с которой я играю. Мне нужно было добавить атрибут data-ride = "carousel" в div карусели, чтобы он начал работать. Благодаря Adarsh для его фрагмента кода, который выделил отсутствующий атрибут.

Ответ 5

Недавно я помогал другу выяснить, почему их карусель не работает. Элементы управления не будут работать, и изображения не будут переходить. У меня был рабочий образец на странице, которую я использовал, и мы просмотрели весь код, включая проверку пунктов выше в этом посте. Мы вставили "хорошую" карусель в ту же страницу, и она все еще работала. Теперь все файлы CSS и начальной загрузки были одинаковыми для обоих. Код теперь был идентичен, поэтому мы могли попробовать только изображения.

Итак, мы заменили изображения двумя, которые работали в моем образце. Это сработало. Мы заменили два изображения на первые два, которые изначально не работали, и это сработало. Мы добавили обратно каждое изображение (все jpegs) один за другим, и когда мы добрались до седьмого изображения (из 18), карусель не удалась. Weird. Мы удалили это одно изображение и продолжили добавлять оставшиеся изображения, пока все они не были добавлены и карусель не заработала.

для справки мы использовали jquery-3.3.1.slim.min.js и bootstrap/4.3.1/js/bootstrap.min.js на этом сайте.

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

Тестовая карусель с ограниченным набором "известных к хорошему" изображений.