DEV Community

Discussion on: How to build an image carousel with React

Collapse
willamesoares profile image
Will Soares Author

Glad you liked :) now I'm thinking about making a more complex carousel, with animation and stuff 😃

Collapse
mujeex profile image
mujeex • Edited on

oh, you should! I will be sure to be checking back to your channel for any update. And also try making it a bit more generic if possible, whereby dom nodes could be passed to the sliders instead of images or URLs.

Thread Thread
willamesoares profile image
Will Soares Author

Great idea! With that the carousel itself could be used for a few other things like a presentation, for instance. Will definitely consider that, thanks.

Thread Thread
mujeex profile image
mujeex

Yeah, because I actually used your logic but then passed objects into the slider to create a testimony carousel. Speaking of animations and modification, can you please guide me on how to make the carousel loop itself? I was thinking of using the setTimeout function inside the useEffect hook which will be invoking the nextSlider function after a certain interval. What are your thoughts on this? Thanks again for taking the reusability thing into consideration.

Thread Thread
willamesoares profile image
Will Soares Author

Hello mujeex,

So, considering that useEffect should be the equivalent of componentDidMount, that is sort of how I would approach the scenario you described. The only difference is that in my opinion it makes sense to continuously loop the carousel, so setInterval would make more sense than setTimeout (which would trigger only once after the component mounts).

Also, make sure that you clear up after yourself, meaning that when you set an interval after mounting a component you better clear that before the component unmounts :)

Thread Thread
mujeex profile image
mujeex

Amazing! It worked like a charm. Thanks a lot, Will. I am really looking forward to your reusable carousel.