Skip to content

component

Aisol Quote Motion

By ulz song

Details

Summary

Aisol Quote Motion is one testimonial carousel with three motions: slide, stamp — cards land on a small stack — and fade.

Description

Aisol Quote Motion is one testimonial carousel with three motions: slide, stamp — cards land on a small stack — and fade. Switching is a control, not a different component. One index drives everything. The motion is CSS on that index, so nothing is measured, no observer is attached, and the canvas shows the first quote at rest. - Autoplay pauses while the visitor hovers or focuses the carousel, and turns off under prefers-reduced-motion — the arrows and dots still work. - Screen readers get one quote at a time; the position ("Quote 2 of 4") is announced politely, never the whole stack. - Stars, a source badge, an avatar (or initials when there is no photo) and a link per quote. What you control • Quotes as an array: quote, author, role, avatar image or URL, rating, source, link — or bind a CMS collection through the quote slots • Motion: slide, stamp or fade; autoplay seconds (0 turns it off) • Arrows, dots, stars and avatars on or off; left or centred • Max width, radius, padding, text size; region label and position wording for screen readers; empty-state text • Accent, text, muted and card colours • Quote slots: give the slotted frame a height of 100% so it fills the card (all cards share the tallest card's height) Limits: one quote is visible at a time by design (use Aisol Review Wall for a grid).

Introduction

Testimonials with three motions

Rank history

Daily rank per list, from the first snapshot — lower is better.

125015001750181479/79/99/119/139/15
  • All · #7543