Carousel data-interval is always 5000 on first item

[ValGeorgiev]

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

[mdo]

Bug reports must include a live demo of the issue. Per our contributing guidelines, please create a reduced test case via CodePen or JS Bin and report back with your link, Bootstrap version, and specific browser and operating system details.

---

This is a saved reply.

[ValGeorgiev]

@mdo The demo is in the documentation https://getbootstrap.com/docs/4.3/components/carousel/#individual-carousel-item-interval . Do you want me to copy and paste the code in codepen? Bootstrap version from 4.2.1 to latest, chrome version: 85.0.4183.102 (Official Build) (64-bit). OS: MacOS Catalina 10.15.6

[mdo]

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

[Johann-S]

Hi,

I'm unable to reproduce it, I made a CodePen which demonstrate we follow the data-interval attributes, and this is the results:

First slide: 9.399s
Second slide: 1.417s
Third slide: 4.412s

You can see my CodePen here: https://codepen.io/Johann-S/pen/zYqeNNO?editors=1010

[Hiws]

Based on that codepen, It looks like it only affects the first slide done.
Once it loops back to the first slide again, it appears to have the correct 10 second interval.

I'm also not getting a console.log on the first slide in the codepen, only after it loops back.

So in this case it's

1. 5000 interval (first slide)
2. 2000 interval (second slide)
3. 5000 interval (third slide)
4. 10000 interval (first slide)
5. 2000 interval (second slide)
6. 5000 interval (third slide)
7. Then repeating 4-6.

Tested in Chrome 85, Windows 10.

[Johann-S]

indeed nice catch @Hiws 👍

if you want to submit a PR do not hesitate 😉

[ashikvarma11]

@ValGeorgiev @XhmikosR @Johann-S @Hiws Is anyone working on this now? If not, I would like to try.

[ValGeorgiev]

@ashikvarma11 feel free to do it, thanks

[vitesoham]

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