Render index 0 when the carousel is visible

[SamehArmouche]

Hello,
I have a carousel with autoplay = true and with 3 elements per slide, and i use ref to render the carousel when it is visible in window,
I need to reset the index to 0 every time the component is visible.

Any idea how ?

[confrodog]

does a useEffect not solve this problem?

[SamehArmouche]

No, because i need reanimation the component when it visible in window

[confrodog]

I would recommend controlling the index of the carousel yourself, with a useState to hold the index and you can pass it into the Carousel with its index prop.
This way, you can set index to 0 and control it with the Navigation Button callback functions with something like setIndex(index++); on next and setIndex(index--); on prev.