Numbered Quote Slider

A one-quote-per-slide testimonial carousel. The left column shows a huge zero-padded numeral; on every change each digit rolls along its own vertical strip to the new value — the tens digit stays put when it doesn't change, and the units digit rolls up or down with the direction of travel. Below it sit a "02 / 05" fraction and a thin progress track whose filled segment slides to the new position. The right column holds a small portrait placeholder tile, the quote, and the person's name and title; the content slides in from the left or right, and you can also drag it sideways to change slides. The index works in controlled or uncontrolled mode, with optional looping and autoplay.

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

<NumberedQuoteSlider/>

    </div>
  );
}

Installation

npx webberui@latest add https://webberui.com/r/numbered-quote-slider.en.json

Usage

import { NumberedQuoteSlider } from "@/components/ui/numbered-quote-slider";

<NumberedQuoteSlider
  eyebrow="客戶怎麼說"
  title="用過的團隊，留下的一句話"
  testimonials={[
    {
      quote: "尖峰時段的出餐時間縮短了將近一半。",
      name: "林語晴",
      role: "營運主管",
      company: "青嶼咖啡",
      highlight: "縮短了將近一半",
    },
    {
      quote: "調度畫面一眼看得出哪台車卡住。",
      name: "陳柏宇",
      role: "調度組長",
      company: "北辰物流",
      rating: 5,
    },
  ]}
  onIndexChange={(i) => console.log(`切到第 ${i + 1} 則`)}
/>

The sample strings above are the Chinese originals: "What customers say", "One line from the teams who use it", and two fictional quotes ("Peak-hour wait times dropped by almost half." / "The dispatch board shows at a glance which truck is stuck.").

Props

NumberedQuoteSliderItem

How it works

• Digit-by-digit wheels: each digit is a vertical strip of 0–9 repeated three times, resting on the middle copy. Next always rolls up and previous always rolls down, so the units digit of 09 → 10 rolls forward one cell to 0 instead of back nine; afterwards it quietly snaps back to the middle copy.
• Timing variables: --wb-numbered-quote-slider-stiffness (default 300, damping fixed at 30) and --wb-numbered-quote-slider-duration (default 500ms). Override them in CSS on an ancestor, or set them through the matching props.
• The accent color comes only from --wb-numbered-quote-slider-accent (defaults #0d9488 light, #2dd4bf dark) and is used for the progress track, stars, highlight and focus ring.
• Dragging the right column: release past 80px or faster than 400px/s to change slides, otherwise it springs back; the arrow buttons sit outside the drag area so they never trigger a drag.
• Autoplay pauses on hover, while focus is inside, when the tab is hidden, or via the pause button; with loop off it stops at the last testimonial.

Accessibility

• The root is a <section>, labelled by the title via aria-labelledby when title is set; the carousel is role="region" with aria-roledescription="carousel" and is focusable
• With focus on the carousel, ←/→ move to the previous/next testimonial; the arrow buttons are type="button" with "Previous testimonial" / "Next testimonial" aria-labels and a focus-visible ring
• The large numeral, fraction and progress track are hidden from assistive tech; an sr-only "Testimonial 2 of 5" is announced via aria-live="polite" instead, and stays silent while autoplay is running to avoid repeated interruptions
• Each quote is rendered as <figure>, <blockquote> and <figcaption>; star ratings are role="img" with a "Rated 5 out of 5" label
• Autoplay is off by default; when on, a visible pause button is always present (WCAG 2.2.2)
• When the user prefers reduce motion: autoplay is always off, the numeral fades in over 150ms instead of rolling, the quote fades in over 150ms without moving, and the progress track jumps straight to the new position; content can still be changed with the buttons, arrow keys and drag