search

rcaferati / react-awesome-slider

React content transition slider. Awesome Slider is a 60fps, light weight, performant component that renders an animated set of production ready UI general purpose sliders with fullpage transition support for NextJS and GatsbyJS. 🖥️ 📱
https://fullpage.caferati.me
MIT License
2.94k stars 296 forks source link

Multiple AutoplaySlider on same page #164

Open irfanDC opened 3 years ago

irfanDC commented 3 years ago

Hi, thanks for the awesome work, I am looking to play more than one slider on a single component, I tried by adding name and id but the 2nd slider get stuck on the second image. Can you please guide me the way to achieve it Here is the code i used `

<AutoplaySlider id="screen_document1" play={true} bullets={false} organicArrows={false} media={this.docsImagesSlides(booth.booth_content[0].screen_document1)}

`

trolit commented 3 years ago

Hi @irfanDC sorry for late answer but I can confirm that the problem exists. What I did was copying the same autoplayslider with same images in single component. After some time first slider stops on loading next image while second one works flawlessly. I've noticed that the problem comes from referencing the same images in both sliders(I guess that when one slider loads it, second one can't do it since it's read by another source). If you want to work around that problem your two sliders can't reference the same image. |

e.g. when I've left in slider1 images {1, 2} and in slider2 images {3, 4} problem didn't appear but If both slider1 and slider2 had images {1, 2, 3, 4} problem appeared.

kylehSCC commented 3 years ago

I'm having the same issue. In my case I have 4 sliders on a single page, all with different images. The last slider is the only one that works, the others get hung up on the second image.