How would you implement a carousel/slider component in React?

🧩 Scenario

You need a production-ready carousel/slider component that supports:

• Swipe and drag gestures
• Infinite loop
• Auto-play with pause-on-hover
• Keyboard navigation
• Smooth transitions
• Responsive sizing

---

🧠 Answer (Design Overview)

1. Core Concepts

• Render slides inside a container using transform: translateX().
• Maintain currentIndex and animate transitions with CSS.
• Add clones:
  • Clone first slide → append to end
  • Clone last slide → prepend to start
• On reaching clones, jump instantly to real slide without animation.

2. Touch & Mouse Drag Support

• Track drag start position
• Track movement → update translateX in real-time
• On release, determine if swipe threshold passed

3. Auto-Play

• Use setInterval or requestAnimationFrame
• Pause on hover or when tab not visible

4. Keyboard Support

• ArrowLeft → prev
• ArrowRight → next

Tradeoffs:

• Infinite looping adds complexity due to jump logic.
• For large images, lazy-load each slide.

---

🎯 Live Demo

Conceptual only, not full UI. You will add the actual UI component later.

---

🔍 Real-World Tips

• Add throttling to avoid rapid firing of next/prev.
• Add drag threshold (e.g., 50px) to commit slide.
• Lazy-load images with loading="lazy".
• Support vertical carousels by switching translate axis.

---

Quick Practice

1. Add touch drag support.
2. Add auto-play with pause-on-hover.
3. Add dot indicators.
4. Make it responsive using ResizeObserver.

---

Summary

• Use cloned slides for infinite looping.
• Manage index with jump logic.
• Support drag, keyboard, and auto-play.
• Keep animation smooth using translateX.