I Built a Carousel with Zero Libraries (스와이프 + 자동재생)

A carousel is one of the most-requested UI components — and you don’t need Swiper or a framework for the basics. It’s one flex row and a translateX. Here’s a live one with arrows, dots, autoplay, and swipe, in vanilla JS.

🎠 Try it (drag/swipe, dots, autoplay): https://dev48v.infy.uk/design/day18-carousel.html

The core trick

Put all slides in one flex row (.track), each width: 100%. To show slide N, set track.style.transform = translateX(-N * 100%) with a CSS transition. That’s the whole carousel.

Then layer on the features

• Arrows / dots: change the index, re-apply the transform, sync the active dot.
• Wrap-around: (index + 1) % count and (index - 1 + count) % count.
• Autoplay: a setInterval that advances; clear it on hover, restart on leave.
• Swipe: on pointerdown record X and disable the transition; on pointermove drag the track; on pointerup snap to the nearest slide if you dragged past ~20%.

When to reach for a library

Hand-rolled is great for learning and simple cases. For virtualized, accessible, touch-perfect carousels, use Embla or Swiper — but now you know what they’re doing.

🔨 Full build (track → goTo() → arrows → dots → autoplay → swipe) on the page: https://dev48v.infy.uk/design/day18-carousel.html

Part of DesignFromZero. 🌐 https://dev48v.infy.uk