Testimonial Carousel — Free HTML CSS JS Slider Snippet

Social proof sells, but a wall of testimonials is overwhelming and a single static quote is forgettable. The testimonial carousel solves both problems: it shows one customer quote at a time, full and readable, then advances automatically so visitors see several without scrolling. This component is a complete, accessible carousel built with a CSS transform track, autoplay that pauses on interaction, arrow controls, and animated progress dots — all in plain HTML, CSS, and vanilla JavaScript with no slider library.

The transform-based track

The mechanics are a flex track inside an overflow: hidden viewport. Every slide has flex: 0 0 100%, so each one is exactly the viewport's width and they line up in a horizontal row. Sliding is a single transform: translateX(-N%) on the track, where N is the active index times 100 — moving to slide 2 translates the track by -100%, slide 3 by -200%, and so on. Because it animates only transform, the slide runs on the GPU compositor at 60fps with no layout work, and will-change: transform hints the browser to promote the track to its own layer ahead of time.

Data-driven slides and ratings

The carousel is built from a DATA array of { text, name, role, rating, color } objects. On load the script loops the array, builds each slide's markup, and derives two things automatically: the author's initials (by splitting the name and taking each word's first letter) for the gradient avatar, and the star row (by rendering a filled star SVG for each point up to rating out of five). This means adding a testimonial is a single array entry — no markup edits — and the four-star example shows partial ratings render correctly.

Autoplay with pause-on-interaction

A setInterval advances the carousel every 5 seconds by calling goTo(index + 1). The crucial UX detail is that autoplay yields to the user: mouseenter and focusin clear the interval so the carousel stops while someone is reading or tabbing through it, and mouseleave and focusout restart it. Every manual action — clicking an arrow or a dot — also calls restart(), which clears and re-creates the timer so the full 5 seconds is given to the slide the user just chose rather than whatever was left on the previous tick.

Infinite wrap-around

The goTo() function normalises any index with (i + length) % length, so advancing past the last slide wraps to the first and going back from the first wraps to the last. The arrows and autoplay all route through this one function, which means there is a single source of truth for the current index, the track transform, and the active dot — no chance of the dots drifting out of sync with the visible slide.

Animated progress dots

The dots are real <button> elements with role="tab". The active dot is not just a different colour — it stretches from a circle to a pill with width: 24px via a CSS transition on width, giving a subtle, modern progress indicator. Clicking any dot jumps straight to that slide and restarts autoplay. The arrows are circular icon buttons with hover states that adopt the accent colour, and everything carries appropriate aria-label and aria-roledescription attributes so the carousel is understandable to screen readers.

Customisation

To use it, replace the DATA array with your real testimonials — set each rating from 1 to 5, give each author a gradient color, and the avatars and stars render automatically. Adjust the 5000ms autoplay interval, change the 0.5s slide transition duration or easing, and swap the #6366f1 accent (active dot, arrow hover, avatars) for your brand. To show real photos instead of initials, render an <img> in place of the .tc-avatar span. For a multi-card view, change the slide's flex-basis to 50% or 33.33% and step the transform by that amount.