Paste your customer quotes and turn them into a smooth rotating slider. Choose slide or fade, autoplay speed, arrows, dots, star ratings and colours, then copy the code.
Runs entirely in your browser. Nothing is uploaded to any server.
Show several happy customers without a long page.
No slider library, just CSS transitions and a small script.
Visitors can swipe between quotes on phones.
In slide mode all quotes sit in one flex row and the track moves with transform: translateX, which is smooth because it does not trigger layout. In fade mode the slides are stacked in the same grid cell and only the active one is visible.
Autoplay pauses while the pointer is over the carousel or keyboard focus is inside it, and it is switched off completely for visitors who prefer reduced motion. Hidden slides get aria-hidden so screen readers only announce the visible quote.
Each quote is a figure with a blockquote and a figcaption.
aria-current marks the active dot for assistive technology.
Initials are generated from the name, so no photos are needed.
Yes. Replace the span with class tc-avatar with an img element and give it the same size and border-radius.
Set the autoplay value to 0. Visitors can still use the arrows, dots or swipe.
If your system has reduced motion turned on, autoplay is deliberately disabled for accessibility.
Yes. All quotes are in the HTML from the start, so crawlers can read them even though only one is visible at a time.
Any reasonable number. Three to six is usually best so visitors actually see them all.
More free tools from My Panda Toolbox.