миниатюры bootstrap не работают

54
3

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

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/carousel.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="well">
<div id="myCarousel" class="carousel slide">

<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>

<!-- Carousel items -->
<div class="carousel-inner">

<div class="item active">
<div class="row-fluid">
<div class="col-md-3"><a href="1.jpg" class="thumbnail"><img src="1.jpg" alt="Image" style="max-width:100%;" /></a></div>
<div class="col-md-3"><a href="1.jpg" class="thumbnail"><img src="1.jpg" alt="Image" style="max-width:100%;" /></a></div>
<div class="col-md-3"><a href="1.jpg" class="thumbnail"><img src="1.jpg" alt="Image" style="max-width:100%;" /></a></div>
<div class="col-md-3"><a href="1.jpg" class="thumbnail"><img src="1.jpg" alt="Image" style="max-width:100%;" /></a></div>
</div><!--/row-fluid-->
</div><!--/item-->

<div class="item">
<div class="row-fluid">
<div class="col-md-3"><a href="1.jpg" class="thumbnail"><img src="2.jpg" alt="Image" style="max-width:100%;" /></a></div>
<div class="col-md-3"><a href="2.jpg" class="thumbnail"><img src="2.jpg" alt="Image" style="max-width:100%;" /></a></div>
<div class="col-md-3"><a href="2.jpg" class="thumbnail"><img src="2.jpg" alt="Image" style="max-width:100%;" /></a></div>
<div class="col-md-3"><a href="2.jpg" class="thumbnail"><img src="2.jpg" alt="Image" style="max-width:100%;" /></a></div>
</div><!--/row-fluid-->
</div><!--/item-->

<div class="item">
<div class="row-fluid">
<div class="col-md-3"><a href="3.jpg" class="thumbnail"><img src="3.jpg" alt="Image" style="max-width:100%;" /></a></div>
<div class="col-md-3"><a href="3.jpg" class="thumbnail"><img src="3.jpg" alt="Image" style="max-width:100%;" /></a></div>
<div class="col-md-3"><a href="3.jpg" class="thumbnail"><img src="3.jpg" alt="Image" style="max-width:100%;" /></a></div>
<div class="col-md-3"><a href="3.jpg" class="thumbnail"><img src="3.jpg" alt="Image" style="max-width:100%;" /></a></div>
</div><!--/row-fluid-->
</div><!--/item-->

</div><!--/carousel-inner-->

<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
</div><!--/myCarousel-->

</div><!--/well-->
</div>
</div>
</div>

<script src="/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="/js/lightbox.min.js"></script>
<script src="/js/jquery-1.11.3.min.js"></script>
<script src="/js/carousel.js"></script>
</body>
</html>

спросил(а) 2020-04-04T01:00:59+03:00 3 месяца назад
1
Решение
54

Рабочий ботинок прямо здесь

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

Ошибка при сборе: для загрузки JavaScript требует jQuery

Вы должны включить ваши файлы в следующем порядке:

    JQuery начальная загрузка

    Ваш Javascript

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="/js/bootstrap.min.js"></script>
    <script src="/js/lightbox.min.js"></script>
    <script src="/js/carousel.js"></script>

Изменение: в комментарии он упомянул, что ресурсы не могли загрузить. Получение ошибки:

не разрешено загружать ресурсы....

Это проблема с хром. У кого-то была такая же проблема.

ответил(а) 2020-04-04T01:20:35.783590+03:00 3 месяца назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема