Я использую Карусель Bootstrap 4 в коде. Карусель Bootstrap 4 не работает

Question

Я использую в коде карусель Bootstrap 4.Но он показывает все три изображения, которые я использую в отдельных предметах по одному предмету за раз.Вот код:

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
                  <div class="carousel-inner">
                    <div class="carousel-item active">
                      <img src="..." class="d-block w-100" alt="...">
                    </div>
                    <div class="carousel-item">
                      <img src="..." class="d-block w-100" alt="...">
                    </div>
                    <div class="carousel-item">
                      <img src="..." class="d-block w-100" alt="...">
                    </div>
                  </div>
                  <a class="carousel-control-prev" href="#carouselExampleControls" 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="#carouselExampleControls" role="button" data-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                  </a>
                </div>

Теперь я хочу показать одно изображение в одной карусели предметов.В моем коде, что я делаю не так?

Answer 1

Пример, который вы предоставляете, неполон, но, возможно, вам не хватает актива Javascript.Просто убедитесь, что у вас есть JS и он расположен после таблицы стилей CSS.

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

Answer 2

Убедитесь, что файлы Bootstrap 4 CSS и JS являются ссылками на странице карусели. В частности, jquery.min.js и popper.min.js и должен bootstrap.min.js вылетает, а затем вставить этот код на страницу карусели, где вы хотите показать

Здесь вы можете найти более подробную информацию о карусели Подробная информация о карусели Bootstrap

Если вы правильно настроите, вы можете увидеть карусель следующим образом:

Answer 3

Поскольку ваш HTML-код все хорошо.Пожалуйста, убедитесь, что.

1. Bootstrap 4 CSS и JS файлы включены правильно.
2. Jquery включен правильно.

ПРИМЕЧАНИЕ: Проверьте консоль (нажмите F12 и нажмите консоль) на наличие ошибок.Вы должны найти что-то там.