Bootstrap Карусель игнорирует интервал данных

Question

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

Я сделал минимальное повторение здесь: https://www.codeply.com/p/avdtdpw8ie

Мы можем видеть, что первый слайд отображается в течение примерно 1 секунды при первом запуске, но при втором запуске он отображается в течение 5 секунд, как определено атрибутом интервала данных.

Answer 1

Вместо использования атрибутов data-interval непосредственно на HTML, вы можете установить интервал с помощью jQuery. Это вызовет карусель после загрузки:

$('.carousel').carousel({
  interval: 1000
})

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel" style="width: 400px; height: 300px">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" alt="First slide" src="https://picsum.photos/400/300" />
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" alt="Second slide" src="https://picsum.photos/400/300" />
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" alt="Third slide" src="https://picsum.photos/400/300" />
    </div>
  </div>
</div>

Подробнее здесь .