时间戳

首页 > 解决方案 > bootstrap 5 滑块间隔无法正常工作

slider - 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>

标签： sliderbootstrap-5

解决方案

BS5 的 Carousel 的代码中，如果元素有 adata-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
    }
  }

推荐阅读