bootstrap 5 个滑块间隔无法正常工作

Question

bootstrap 5 slider:我是手动设置interval: 1000毫秒, 但是第一张幻灯片花费的时间超过 1000 毫秒，然后其他幻灯片迭代没问题.. & 每次迭代结束 第一张幻灯片延迟超过 1000 毫秒。

我该如何解决？ 有人能帮我弄清楚吗..在此先感谢

下面的代码

var myCarousel = document.querySelector('#carouselExampleDark')
var carousel = new bootstrap.Carousel(myCarousel, {
  interval: 1000,
  
})

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">


<div id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="carousel">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <div class="carousel-inner" style="height: 300px;">
    <div class="carousel-item active" data-bs-interval="10000">
      <img src="https://picsum.photos/seed/picsum/200/300" class="d-block w-100" alt="...">
      <div class="carousel-caption  d-md-block">
        <h5>First slide label</h5>
        <p>Some representative placeholder content for the first slide.</p>
      </div>
    </div>
    <div class="carousel-item" data-bs-interval="2000">
      <img src="https://picsum.photos/200/300?grayscale" class="d-block w-100" alt="...">
      <div class="carousel-caption  d-md-block">
        <h5>Second slide label</h5>
        <p>Some representative placeholder content for the second slide.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="https://picsum.photos/200/300/?blur" class="d-block w-100" alt="...">
      <div class="carousel-caption  d-md-block">
        <h5>Third slide label</h5>
        <p>Some representative placeholder content for the third slide.</p>
      </div>
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>

Answer 1

BS5 的 Carousel 代码规定，如果元素具有 data-bs-interval，则使用该值，否则使用默认值。默认是 5000 但如果你用一个值实例化它（就像你用 interval: 1000 做的那样）然后那个值被使用。

您可以添加：

将data-bs-interval="1000"添加到每个carousel-itemCSS，并从JS中删除实例化器，或者
从您现有的 CSS 代码中删除 data-bs-interval=，并在 JS

interval: 1000

兴趣 - carousel.js 中执行设置的代码（提取形式 Github）：

 _updateInterval() {
    const element = this._activeElement || SelectorEngine.findOne(SELECTOR_ACTIVE_ITEM, this._element)

    if (!element) {
      return
    }

    const elementInterval = Number.parseInt(element.getAttribute('data-bs-interval'), 10)

    if (elementInterval) {
      this._config.defaultInterval = this._config.defaultInterval || this._config.interval
      this._config.interval = elementInterval
    } else {
      this._config.interval = this._config.defaultInterval || this._config.interval
    }
  }

Answer 2

您可以简单地使用 data-bs-interval 属性，像这样

<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel" data-bs-interval="10000">

这里我设置的间隔是10秒，所以比默认的bootstrap5间隔长2倍，也就是5秒

Answer 3

我遇到了同样的问题。对我来说，当我将 data-interval="xxx" 直接放置到主 div 时，它工作正常。参见示例：

<div id="carouselExampleControls" data-interval=10000 class="carousel slide" data-ride="carousel">

bootstrap 5 个滑块间隔无法正常工作

bootstrap 5 slider interval not working properly

slider

bootstrap-5