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

问题描述

bootstrap 5 滑块：我手动设置 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>

解决方法

BS5 的 Carousel 的代码规定，如果元素有 data-bs-interval，则使用该值，否则使用默认值。默认值为 5000，但如果您使用一个值对其进行实例化（就像您对 interval: 1000 所做的那样），则使用该值。

您可以添加：

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

出于兴趣 - 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
    }
  }

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

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

这里我将间隔设置为 10 秒，因此它比默认的 bootstrap 5 间隔（即 5 秒）长 2 倍

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

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

bootstrap-5 slider slider