Component · quote-carousel

Quote carousel

A testimonial carousel that swipes natively on phones, drags with inertia on desktop, and has an autoplay that stops the moment someone touches it. Demo content is real designer quotes, never fake reviews.

Vanilla JS2.1 KBScroll-snapPause buttonReduced motion

Good design is as little design as possible.

Dieter RamsTen principles for good design

Styles come and go. Good design is a language, not a style.

Massimo VignelliDesigner

Design is not just what it looks like and feels like. Design is how it works.

Steve JobsThe New York Times, 2003

Simplicity is not the goal. It is the by-product of a good idea and modest expectations.

Paul RandDesigner

These are famous public quotes from designers, used here only as sample content. Sujon's rule: no fake testimonials. On a real site, put only real client words in it, with their permission.

Use it

Copy the folder quote-carousel/ (the .js and .css files) into your project. No build step and no framework.

Behaviour

Phone swipe is the browser's own scrolling with scroll-snap: no fighting with vertical page scroll.
Mouse: drag with inertia that lands on the nearest slide; a drag never triggers a click.
Autoplay has a visible Pause button, stops for good after any user action, and pauses on hover, focus, off screen and in hidden tabs (WCAG 2.2.2).
Keyboard: focus the carousel and use the arrow keys; slides are labelled "1 of 4".
prefers-reduced-motion: no autoplay, no smooth scrolling, no scale.

Credits

Quotes: Dieter Rams (from his ten principles for good design), Massimo Vignelli, Steve Jobs (The New York Times Magazine, 2003), Paul Rand. Used as short attributed quotations for demonstration.
Carousel pattern after the WAI-ARIA Authoring Practices carousel guidance. Written from scratch.

<link rel="stylesheet" href="quote-carousel.css">
<section class="qc" data-quote-carousel data-autoplay="6500" aria-roledescription="carousel" aria-label="What clients said" tabindex="0">
  <div class="qc-track">
    <figure class="qc-slide"><blockquote>Real words from a real client.</blockquote><figcaption>Name<small>Company</small></figcaption></figure>
  </div>
  <div class="qc-ui">
    <button class="qc-prev" type="button" aria-label="Previous">...</button>
    <button class="qc-next" type="button" aria-label="Next">...</button>
    <div class="qc-bar"><i></i></div><span class="qc-count"></span>
    <button class="qc-play" type="button"><span>Pause</span></button>
  </div>
</section>
<script type="module" src="quote-carousel.js"></script>

Option	Default	What it does
data-autoplay	off	Milliseconds between slides; omit for no autoplay.
.qc-slide flex-basis	min(78%,720px)	Slide width; the next slide peeks in so people know they can swipe.