Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Carousel data-interval is always 5000 on first item

See original GitHub issue

Hi all, I implemented a carousel using bootstrap carousel component. Everything were working fine until I tried to delay the first item with more than 5 seconds. It looks like bootstrap is ignoring data-interval="10000" attribute to the element. I checked it in the documentation and it’s not working on the demo there as well. First item is delayed only 5 seconds, instead of 10seconds. Every other item is respecting the data-interval attribute. Can you suggest some workaround or am I missing something?

Link to the documentation: https://getbootstrap.com/docs/4.3/components/carousel/#individual-carousel-item-interval MacOS - Chrome

Issue Analytics

State:
Created 3 years ago
Comments:9 (5 by maintainers)

Top GitHub Comments

1reaction

mdocommented, Sep 23, 2020

Ah sorry, yes, confirming this is the case in the latest docs: https://getbootstrap.com/docs/4.5/components/carousel/#individual-carousel-item-interval. Also affects v5’s docs.

/cc @Johann-S

0reactions

vitesohamcommented, May 26, 2022

interval not working properly it always delays for 1 to 2 seconds.

Top Results From Across the Web

bootstrap 5 slider interval not working properly - Stack Overflow

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

Re: Timing in Carousels - Adobe Support Community

Unexpressed, the data-interval on the carousel container is 5000 milliseconds for all slides. When expressed, the container assumes the new ...

Bootstrap JS Carousel Reference - W3Schools

Specifies the delay (in milliseconds) between each slide. Note: Set interval to false to stop the items from automatically sliding, Using JS Using...

Carousel · Bootstrap v5.1

Add data-bs-interval="" to a .carousel-item to change the amount of time to delay between automatically cycling to the next item. First slide.

Paradise Slider Documentation - Ben Glaros

We would like to thank you for purchasing Paradise Slider! ... class="carousel slide" data-ride="carousel" data-pause="hover" data-interval="5000"> <!