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
 
hashbyt profile image
Hashbyt

This is such a well-explained tutorial! The way you handled transitions and the invisible reset for the infinite effect is super clever. I also appreciate how you made the carousel responsive with media queries and resize handling it’s a detail that’s often overlooked.

Quick question: how would you approach adding indicators (like dots) for progress? Would you integrate it into the hook or keep it as a separate component? Curious to hear your take!

Collapse
 
cristea_theodora_6200140b profile image
Theodora Cristea • Edited

I’m glad you like the functionality,🤗and I hope you understood the logic behind the carousel, it’s quite simple.
I tried hard to explain it in a way that would make sense both for beginners and for more advanced users.
When working with React, it’s recommended not to make components too long and to try separating them into smaller components for better site functionality, for reusability, clarity, and maintainability. I’m glad you’re adding the progress indicators functionality! 🙃I didn’t split everything into too many components or hooks so it would be easier to read, but of course, they can be separated!
I’m happy it’s helpful to you, happy coding!🤗

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
 
uzzy412_73 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
 
chandanpatidar profile image
Chandan Patidar

Wow great

Collapse
 
cristea_theodora_6200140b profile image
Theodora Cristea

Thank you so much!🤗

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
 
yorgie7 profile image
Yogesh Bamanier

Seems your Discord link has expired...