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.

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.