Testimonial Carousel
A swipeable carousel of testimonial cards with quote, star rating, photo, name and role.
On this page
The Testimonial Carousel widget shows what your clients say, as a row of cards that visitors can swipe or click through. Each card has a quote, an optional star rating, a photo, a name and a role or company.
Add a Testimonial Carousel
Open Insert in the left panel and find Testimonial Carousel in the Marketing group, or type "testimonial" in the search box. Drag it onto the canvas, or click it to add it next to the selected element. See Add elements.
Add testimonials
Each card is a row in Testimonials. Click Add item to add one and drag the handle to reorder. Fill in the Quote, Name and Role / company, and add a Photo if you have one. Rating (0–5) sets the stars; 0 hides them for that card.
Set up the carousel
- Slides per view sets how many cards are visible at once. Use a decimal, such as 1.2, to show part of the next card as a hint that there is more. Set a smaller number for tablets and phones in their device views.
- Arrows and Pagination (dots, a "2 / 5" fraction or a progress bar) help visitors move between cards. Touch swipe always works.
- Autoplay moves to the next card on its own after the Delay. It never starts for visitors who prefer reduced motion, and it pauses while the carousel is hovered or has focus. Keep Pause button on so visitors can stop it.
Content tab settings
| Setting | What it does |
|---|---|
| Testimonials | The list of cards. |
| Quote (each item) | What the client said. |
| Name (each item) | The client's name. |
| Role / company (each item) | Their role, company or project. |
| Photo (each item) | An optional portrait. |
| Rating (0–5) (each item) | The number of stars. 0 hides the stars. Default: 5. |
| Card layout | Quote, then author row, Centered, photo above the name or Author first, then quote. Default: Quote, then author row. |
| Star rating | Shows the stars. On by default. |
| Quote icon | The icon at the top of each card. Default: a quote mark. |
| Name HTML tag | H1 to H6, DIV, SPAN or P. Default: DIV. |
| Setting | What it does |
|---|---|
| Slides per view | Cards visible at once (1–10). Decimals show part of the next card. Can differ per device. |
| Slides to scroll | How many cards move per click (1–10). Can differ per device. |
| Gap | Space between cards. Can differ per device. |
| Vertical alignment | Equal height, Top, Middle or Bottom. |
| Arrows | Shows previous and next buttons. On by default. |
| Arrows position | Inside, over the slides, Outside the slides or Below, next to the pagination. Default: Inside. Shown when Arrows is on. |
| Previous icon, Next icon | The arrow icons. Shown when Arrows is on. |
| Pagination | None, Dots, Fraction (2 / 5) or Progress bar. Default: Dots. |
| Rewind | Next on the last card goes back to the first one. |
| Mouse drag | Lets visitors drag with the mouse. Touch swipe and trackpads always work. On by default. |
| Transition duration (ms) | How long a move takes (0–3000). Default: 500. |
| Autoplay | Moves on by itself. Never starts for visitors who prefer reduced motion; pauses while hovered or focused. |
| Delay (ms) | Time between moves (1000–30000). Default: 5000. Shown when Autoplay is on. |
| Pause on hover | On by default. Shown when Autoplay is on. |
| Pause button | A button that stops the autoplay, needed for content that moves on its own (WCAG 2.2.2). On by default. Shown when Autoplay is on. |
| Accessible name | The name screen readers announce, such as "Customer stories". |
Design tab settings
| Section | Settings |
|---|---|
| Card | Alignment, Space between parts, Padding, Background, Border, Border radius, Shadow, Shadow room (space kept above and below the cards so shadows are not cut off). |
| Quote | Typography, Color, Quote icon size, Quote icon color. |
| Author | Photo size, Photo radius, Photo spacing, Name typography, Name color, Role typography, Role color. |
| Rating | Star size, Star spacing, Color, Empty star color. Shown when Star rating is on. |
| Arrows | Button size, Icon size, Offset (distance from the slides, or between the two arrows when they are below), Icon color, Background, Border and Shadow (Normal tab), Icon color, Background and Border color (Hover tab), Border radius. Shown when Arrows is on. |
| Pagination | Distance from slides, Alignment. Dots: Dot size, Active dot width (wider than the dot size for a pill), Space between dots, Dot color, Active dot color. Fraction: Typography, Color. Progress bar: Bar height, Bar color, Track color. Pause button color with autoplay. |
The Design tab also has the sections every element shares: Spacing & position, Background & border and Mask. See Spacing, size & position.
Behaviour tab
The Behaviour tab has the settings every element shares: anchor and classes, entrance animations, motion effects, visibility per device, display conditions and interactions. See Motion & effects.
Tips
- Real names and roles make testimonials believable. Ask clients before you publish their words.
- If you only have one or two quotes, the Testimonial widget is simpler.