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>
Ответ 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 на этом сайте.
Я не знаю, почему изображение могло или могло вызвать сбой карусели, но это сделало. Я не мог найти ссылку на эту причину в другом месте, поэтому я публикую здесь для потомков в надежде, что это может помочь кому-то еще, когда другие решения не сработают.
Тестовая карусель с ограниченным набором "известных к хорошему" изображений.
