DEV Community

Build Your Own Infinite Carousel in React (with a Custom Hook)❗

Theodora Cristea on September 15, 2025

Hey!🥰 It’s been a while since my last post… No ofcorse, I haven’t quit web development,🙃 and nope, I didn’t go on a long vacation either.🙃 Quite th...
Collapse
 
yaldakhoshpey profile image
Yalda Khoshpey

nice 💪🏻❤️‍🔥😍

Collapse
 
cristea_theodora_6200140b profile image
Theodora Cristea

Thank you!😊

Collapse
 
yaldakhoshpey profile image
Yalda Khoshpey

❤️‍🔥⭐🤩

Collapse
 
yorgie7 profile image
Yogesh Bamanier

I loved under the hood functionalities. Keep doing and sharing 😇

Collapse
 
cristea_theodora_6200140b profile image
Theodora Cristea

Thank you! 🤗 I'm happy to hear that!

Collapse
 
alexandru-ene-dev profile image
Alexandru Ene

Hey, nice one! You made a good job on reusability. I think I might borrow it. With your permission, of course! :)

Collapse
 
cristea_theodora_6200140b profile image
Theodora Cristea

Thank you so much! Is not the perfect one, but is working🙃 I'm so glad to hear that! 🥰 You have my permission, of course!🤗 I hope will be helpful for you! Happy codding!🙃

Collapse
 
dragostrif profile image
DragosTrif

Deployit with github pages

Collapse
 
cristea_theodora_6200140b profile image
Theodora Cristea

I will do it!😊Thank you!

Collapse
 
kc900201 profile image
KC

Thanks for sharing this. I'd like to borrow this code as well. What would you suggest to improve the code's performance?

Collapse
 
cristea_theodora_6200140b profile image
Theodora Cristea

You're welcome!🤗 I didn’t split the hook into smaller parts myself, but if you’d like to shorten it, you could simplify it into two hooks.
As for performance… I’m aware it’s not the perfect carousel, but for me it’s not about perfection, it’s about the learning process... I might create another one in the future or make improvements to this one to share here on DEV.😊

So, The first hook could handle navigation + index management - taking care of the index, the showNext and showPrev functions, and the resets when you reach the end of the original slides.

The second hook could handle autoSlide (interval + pause on hover) - managing only the interval and the pause/resume on hover logic.

Splitting the logic into two hooks would mainly help with clarity, reusability, and maintainability. Hope this helps! Happy coding!🤗

Collapse
 
chandanpatidar profile image
Chandan Patidar

Wow great

Collapse
 
cristea_theodora_6200140b profile image
Theodora Cristea

Thank you so much!🤗

Collapse
 
yorgie7 profile image
Yogesh Bamanier

Seems your Discord link has expired...