bootstrap 5 slider interval not working properly

Question

bootstrap 5 slider: I am manually setup interval: 1000 millisecond , but first slide take more than 1000 millisecond & then other slide iterate okay .. & end of the every iteration first slide delay more than 1000 millisecond .

How do I fix that ? would someone help me to figure it .. thanks in advance

Code Below

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

I had the same issue. For me it's working fine when I place the data-interval="xxx" directly to the main div. See example:

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

Answer 2

This will not work because you have written 10000(ten-thousand intervals) just write this { data-bs-interval="1000" }. MIstake -write 1000 intervals intead of 10000.

Answer 3

you can simply use the data-bs-interval attribute, like this

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

Here I set the interval to 10 seconds, so it's 2 times longer than the default bootstrap 5 interval, which is 5 seconds

Answer 4

The code for BS5's Carousel has it that if element has a data-bs-interval then that value is used, otherwise it uses the default. Default is 5000 but if you instantiate it with a value (like you do with interval: 1000) then that value is used.

You can add either:

• add data-bs-interval="1000" to each carousel-item CSS, and remove the instantiator from the JS, or
• remove the data-bs-interval= from your existing CSS code and keep the interval: 1000 in the JS

For interest - the code in carousel.js that does the setting (extracted form 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
    }
  }