Блог

Главная - Вопросы по программированию - Почему не работают мои элементы управления начальной загрузкой?

Почему не работают мои элементы управления начальной загрузкой?

#javascript #html #css #twitter-bootstrap #bootstrap-carousel

#javascript #HTML #css #twitter-bootstrap #bootstrap-carousel

Вопрос:

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

Я написал codepen с примером моего кода здесь.

и мой HTML ниже для быстрого ознакомления.

 <div class="container">
  <div id="casesCarousel" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
      <div class="row">
        <div class="col-md-4">
          <div class="carousel-item active">
            <div class="card card-body">
              <h1>0</h1>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="carousel-item active">
            <div class="card card-body">
              <h1>1</h1>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="carousel-item active">
            <div class="card card-body">
              <h1>2</h1>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="carousel-item ">
            <div class="card card-body">
              <h1>3</h1>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="carousel-item ">
            <div class="card card-body">
              <h1>4</h1>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="carousel-item ">
            <div class="card card-body">
              <h1>5</h1>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="carousel-item ">
            <div class="card card-body">
              <h1>6</h1>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="carousel-item ">
            <div class="card card-body">
              <h1>7</h1>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="carousel-item ">
            <div class="card card-body">
              <h1>8</h1>
            </div>
          </div>
        </div>
      </div>
    </div>
    <a class="carousel-control-prev" href="#casesCarousel" 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="#casesCarousel" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
 </div>

Ответ №1:

Здесь отсутствует ссылка на java script, который обеспечивает работу caroussel.

Добавьте следующий код в заголовок вашей страницы

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

Затем повторите попытку после обновления ctrl F5. Caroussel не работает на чистом HTML и CSS, для этого требуются библиотеки js из bootstrap

Комментарии:

1. Я загрузил их в codepen, но по-прежнему безуспешно.

2. Попробуйте лучше это на своем веб-сервере. Просто включите все необходимые библиотеки в тег head. Затем проверьте наличие ошибок в консоли (ctrl shift i в chrome). Если вы видите там ошибки, покажите их здесь.

3. И проверьте доступ к этим скриптам, если вы можете открыть их с компьютера, на котором вы тестируете свой сайт.

4. Это в голове. У меня есть другая карусель, которая содержит только один элемент на слайд, который также имеет другой идентификатор карусели и работает просто отлично. это также на той же странице.

Ответ №2:

В этом примере, который вы обнаружили, ошибка в codepen ;

bootstrap.min.js: 6 Неперехваченная ошибка типа: для JavaScript Bootstrap требуется jQuery. jQuery должен @ * быть включен перед JavaScript Bootstrap. при Object.jQueryDetection (bootstrap.min.js: 6) при bootstrap.min.js:6 при bootstrap.min.js:6 при bootstrap.min.js: 6 *@

исходный код bootstrap JS не добавлен в файлы и выдает ошибку при запуске. пожалуйста, проверьте наличие вашего bootstrap JS и версию, чтобы сделать это.

Ответ №3:

не заметил, row and column удалите это. И посетите bootstrap-carousel

и добавьте jquery