Auto-Play Carousel — Free HTML CSS JS Snippet

A carousel is one of the most requested UI patterns in frontend development — showcasing featured content, hero slides, testimonials, or product images in a compact rotating format. This snippet delivers a production-ready auto-playing carousel in pure HTML, CSS, and vanilla JavaScript with zero dependencies: a sliding track with smooth cubic-bezier transitions, animated dot indicators, arrow navigation, a visual progress bar, pause-on-hover, and pointer-based swipe support for touch screens.

The carousel is used across virtually every category of web project — SaaS landing pages, e-commerce hero sections, portfolio showcases, marketing sites, and dashboards. Getting the implementation right matters: jank-free transitions, accessible ARIA attributes, correct swipe detection, and pause-on-hover are all expected by users and required for production quality.

The sliding track mechanism

The core of the carousel is a display: flex track containing all slides as min-width: 100% children. Navigating to slide n sets transform: translateX(-n * 100%) on the track, which shifts the entire row by one viewport-width unit. The CSS transition: transform 0.55s cubic-bezier(0.77,0,0.18,1) applies a custom easing — fast start, smooth deceleration — that feels cinematic rather than mechanical.

The progress bar timer

Each auto-play cycle is visualised with a bottom progress bar that grows from 0% to 100% width over the same duration as the interval (4 seconds). The animation uses a width CSS transition set to linear with the exact interval duration, so the bar and the slide advance in sync. When the user navigates manually, the transition is reset to none (forcing a synchronous paint), then re-applied on the next requestAnimationFrame — this reliably restarts the animation from 0% without a flash.

Dot indicators with pill active state

Each dot starts as a 7px circle. The active dot expands to a 22px-wide pill via width and border-radius transitions — a pattern that communicates both current position and progress direction more clearly than a simple colour change. Dots are <button> elements with role="tab" for keyboard and screen reader accessibility.

Pause on hover

mouseenter clears both the slide interval and progress timers. mouseleave restarts them. This prevents the carousel from advancing while the user is reading content — a standard UX expectation that many basic carousel implementations miss.

Swipe support via Pointer Events API

Rather than separate touch and mouse event handlers, the snippet uses a single pointerdown/pointerup pair on the track. The delta (clientX end minus start) determines direction: left-swipe advances, right-swipe retreats. Any delta larger than 40px counts as an intentional swipe. The Pointer Events API handles both mouse drags and touch swipes with one code path.

Accessibility

Each slide has aria-hidden="false" (current) or aria-hidden="true" (hidden), updated on every navigation. The container has role="region" and aria-live="polite", and arrow buttons have aria-label. Dot buttons have role="tab" and individual aria-label values. Pair with an animated tabs component for tabbed content that doesn't auto-advance.