search

YIZHUANG / react-multi-carousel

A lightweight production-ready Carousel that rocks supports multiple items and server-side rendering with no dependency. Bundle size 2kb.
MIT License
1.25k stars 286 forks source link

How to add delay to a carousel if there are more than one carousel in the webpage but with same interval? #297

Closed sandrinjoy closed 2 years ago

sandrinjoy commented 2 years ago

Describe the bug I was having a situation where there are 2 carousels running on a webpage. So my client wanted the second carousel to have an interval delay with respect to the first one.

To Reproduce I was able to do that somehow, but not sure if that is the correct way to implement it, but here is the (temporary solution) as of now

<Carousel responsive={responsive} additionalTransfrom={0} autoPlay={true} autoPlaySpeed={500} centerMode={false} transitionDuration={1000} infinite={true}

carousel 1 ....

<Carousel responsive={responsive} additionalTransfrom={0} autoPlay={true} autoPlaySpeed={1500} centerMode={false} transitionDuration={1000} infinite={true} > carousel2...

So here I added 1s extra for autoplayspeed for the 2nd one and it worked as expected. But I really have no idea how this working. Can somehow explain how I got this delayed transition with same interval by changing autoplayspeed ?

Expected behavior carousel B to have an interval delay with respect to the first one.

YIZHUANG commented 2 years ago

Because the autoplay speed is default to 500ms if not specified, so 1s is correct