Multiple sliders on the same page

[sergiofornet]

When trying to use two (or more) sliders at the same time, the last one works properly but any other one transitions back and forth to active slide when arrows are clicked. I don't know why but smoothTransition is called twice so it transitions, then the slides are updated and then it transitions again.

Any clue on why is this happening?

[sergiofornet]

It seems the transitionend event is triggered twice for every slider on a page but the last. Using a ref to the slider and adding the listener to it instead of window did the trick for me.

[AvinashKomaturi]

Hey @sergiofornet, I am also facing the same issue. can you please explain to which component should I create ref?

[sergiofornet]

@AvinashKomaturi

The ref is created inside Slider component and passed to the container element via ref attribute:

<div css={SliderCSS} ref={sliderRef}>

Then that DOM element is used to add and remove the transitionend event listener.

I submitted a PR on this. #15

[AvinashKomaturi]

Thanks @sergiofornet

[DZuz14]

Fixed via #15 thank you!