Карусель начальной загрузки правильно отображается на веб-странице, но кнопки «предыдущий / следующий» не работают? - PullRequest
0 голосов
/ 05 октября 2019

Не знаю почему, я импортировал jQuery с элементом и работал над этим часами, ничего не работает. Я убедился, что ссылки в кнопках соответствуют идентификатору, указанному в тексте как карусель, и прочитал, что скрипт jQuery должен быть загружен до начальной загрузки, поэтому я переставил сценарии и буквально извлек это из getbootstrap.com в разделе «Документация», поэтому я понятия не имею, почему он не работает. enter code here

//This is the importing and all the stuff that is necessary for the carousel to work
    <head>
        <meta charset = "utf-8">
        <meta name = "viewport" content = "width=device-width, initial-scale=1, shrink-to-fit = no">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <script src="js/jquery-1.7.1.min.js"></script>
        <script src="js/bootstrap-transition.js"></script>
        <script src="js/bootstrap.js"></script>
    </head>
//This is all of the stuff to do with the actual carousel
    <body>
        <div id="OneSourceCarousel" class="carousel slide" data-ride="carousel">
          <div class="carousel-inner">
            <div class="carousel-item active">
              <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(35).jpg">
            </div>
            <div class="carousel-item">
              <img class="d-block w-100"src="https://mdbootstrap.com/img/Photos/Slides/img%20(33).jpg">
            </div>
            <div class="carousel-item">
              <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(31).jpg">
            </div>
         </div>
          <a class="carousel-control-prev" href="#OneSourceCarousel" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
          </a>
          <a class="carousel-control-next" href="#OneSourceCarousel" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
          </a>
        </div>
        </body>
        </html>

1 Ответ

0 голосов
/ 05 октября 2019

Прекрасно работает для меня с CDN. Может быть, вы открывали HTML прямо из файловой системы вместо локального сервера? Проверяли ли вы консоль js браузера и вкладку сети в инструментах разработчика, чтобы увидеть, действительно ли загружены файлы js?

<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit = no">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>

<body>
  <div id="OneSourceCarousel" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(35).jpg">
      </div>
      <div class="carousel-item">
        <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(33).jpg">
      </div>
      <div class="carousel-item">
        <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(31).jpg">
      </div>
    </div>
    <a class="carousel-control-prev" href="#OneSourceCarousel" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#OneSourceCarousel" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...