OneTaskBy Tim King · Updated
Testimonial Carousel
Swipeable Quote Slider With Previous and Next Buttons, One to Three Quotes in View
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the Testimonial Carousel works
A testimonial carousel shows customer quotes one set at a time, with arrows to move through them and swipe on touch screens. This testimonial carousel generator builds it on CSS scroll snap, so it needs only a few lines of script for the buttons.
Carousels let a page show many quotes in the space of one or two, which helps when the quotes are long or the page is already busy. Most visitors only see the first slide, though, so put your strongest testimonial first.
How the testimonial carousel works
The quotes sit in a CSS grid that flows sideways and scrolls horizontally, with
scroll-snap-type so every swipe or scroll lands neatly on a card. The previous and next buttons
scroll by the width of one card plus the gap, and they switch themselves off at each end. On
screens under 640 pixels wide the cards take 85 percent of the width so the next quote peeks in,
which shows people they can swipe.
Accessibility
Each quote is a <figure> with a <blockquote> and a <figcaption> for the name, which is the
right markup for a quote with its source. The track can take keyboard focus, so arrow keys scroll
it, and the buttons have spoken labels. Smooth scrolling is turned on only when the visitor has not
asked for reduced motion.
FAQ
Why is there no autoplay?
Slides that move on their own are hard to read, distract from the rest of the page and must have a pause button to meet accessibility guidelines. Studies of carousels show few visitors wait for later slides anyway, so manual controls serve people better.
Can I add photos to the quotes?
Yes. Put an <img> inside the <figcaption> before the name, with a fixed width and height and
border-radius: 50% for a round avatar. Use the person's name as the alt text or leave it empty,
since the name is already written next to it.
Does the carousel work without JavaScript?
Yes. Scroll snap is plain CSS, so the quotes still scroll and snap by swipe, trackpad or keyboard. Only the arrow buttons need the script, and without it they simply do nothing.
Should I use a carousel or a grid of testimonials?
A grid shows every quote at once and is better when you have six or fewer short ones. A carousel suits more quotes, longer quotes or tight space, such as a section on a product page.
See also: all UI Components tools, Layout & Spacing, Shadows & Motion, Shapes & SVG, Forms & Inputs, Colour.
Related tools
Testimonial Grid
Build a masonry wall of testimonials with avatars and stars.
Logo Scroller
Build a seamless infinite logo marquee in pure CSS.
Card Builder
Design a card component and copy its HTML and CSS.
Hero Section Builder
Landing page hero sections with fluid headline and buttons.
Feature Grid Builder
Responsive icon-title-description feature grids for landing pages.