Carousel

v1.0.0·Added in 1.0.0

Swipeable rows of slides on embla: photos, listing cards, testimonials and onboarding, with peek, arrows, dots, thumbnails and autoplay.

Drag or swipe the slides: embla's physics carry them and they snap to the nearest slide (dragFree lets a rail glide without snapping). With a mouse, round arrows sit on the photo (or beside it, or in the header); they fade out at the ends and hide when there is nothing to scroll. Click a dot, a story bar or a thumbnail to jump there; the active dot stretches on a spring. With focus anywhere inside (the viewport itself is focusable), Left and Right (Up and Down when vertical) move one slide, Home and End jump to the first and last; inputs inside keep their own arrow keys. Dots and thumbnails are one Tab stop each (focus follows the selection), slides out of view are inert so Tab never lands on a hidden link (except in dragFree rails, which scroll a focused slide into view), and an arrow that turns disabled at the end hands its focus to the other one. Autoplay fills the bars as it runs and pauses while hovered, while keyboard focus is inside, while dragging, when the tab is hidden and when the carousel is off screen; the pause / play button is always there. On a phone arrows hide, 12% of the next slide peeks, dots get 44px tap areas and vertical page scrolling is never blocked. Under reduced motion arrows jump, effects are off and autoplay starts paused.