Testimonial - Slider¶
A carousel of testimonial cards - review text, optional star rating, quote mark, company logo, and an author block (photo or initials, name, designation) - with arrows, dots, autoplay, and auto-scroll. Best for: rotating social proof, customer review carousels, logo-and-quote sliders where space is tight.
📷 Hero image
Target file: assets/img/testimonial-slider/hero.webp
A horizontal carousel of three testimonial cards visible across the viewport on a Light background, each card holding a quote mark, review text, a star row, and an author block with a circular photo, name, and designation. Show pagination dots centered below with the active dot in the Secondary color. Captured at desktop width.
At a glance¶
Testimonials Slider Social proof
- What it does: shows testimonials in a horizontal Splide carousel with a set number of cards per view per breakpoint. Supports loop / slide / fade motion, autoplay and continuous auto-scroll, arrows, dots, an edge fade mask, and peeking neighbors.
- Best used for: a compact review carousel that cycles through many testimonials, or a continuous marquee of logo-and-quote cards.
- Not the right fit if: you want every testimonial visible at once (use Testimonial - Grid) or you only need one featured pull-quote (use Quote).
- 🔗 Live demo: (add demo link)
Add it to your page¶
- In the HubSpot page editor, click Add and search for Testimonial - Slider.
- Drag it onto your page where you want the carousel to appear.
- Open Click to update content › Testimonials and add each review (name, designation, review text, and optionally a photo or logo).
- Turn on the pieces you want: Show rating star, quote sign, and Show author company logo.
- In the Style tab, set Layout › Columns (slides per view) per breakpoint.
- Choose Slider settings › Slider navigation and configure Advanced settings (loop / autoplay / auto-scroll).
Design recipes¶
Each recipe is a look plus the exact fields to reproduce it.
A 3-up loop slider with pagination dots.
📷 Result
Target file: recipe-dots-carousel-default.webp
Three testimonial cards across the viewport with pagination dots centered below, the active dot filled in the Secondary color.
| Field | Set to |
|---|---|
| Slider settings › Slider navigation | dots |
| Advanced settings › Type of slider | loop |
| Layout › Columns › Desktop / Tablet / Mobile | 3 / 2 / 1 |
| Slider dots › Active state › Slide dots background color | secondary |
Outside arrows with rounded buttons.
📷 Result
Target file: recipe-arrow-carousel.webp
The testimonial cards flanked by circular prev and next arrow buttons sitting just outside the slider on the left and right.
| Field | Set to |
|---|---|
| Slider settings › Slider navigation | arrows |
| Slider arrows › Arrow location › Arrangement | outside_slider |
| Slider arrows › Arrow background round corner › Round corner | custom (100) |
Auto-advancing with a pause on hover.
📷 Result
Target file: recipe-autoplay.webp
The slider captured mid-advance between slides, conveying automatic rotation, with dots below marking the current position.
| Field | Set to |
|---|---|
| Advanced settings › Slider functionality | autoplay |
| Advanced settings › Autoplay interval time | 2000 (ms) |
| Advanced settings › Pause on hover | on |
A continuous, gently scrolling wall of quotes.
📷 Result
Target file: recipe-auto-scroll-marquee.webp
A continuous row of testimonial cards mid-scroll with partial cards peeking at both edges and no dots or arrows, reading as a gently drifting marquee.
| Field | Set to |
|---|---|
| Advanced settings › Slider functionality | auto_scroll |
| Advanced settings › Type of slider | loop |
| Slider settings › Slider navigation | none |
| Advanced settings › Speed of slider | 1 |
"I want to..." quick reference¶
| Goal | Setting |
|---|---|
| Show dots / arrows / both | Slider settings › Slider navigation |
| 3-up desktop / 2-up tablet / 1-up mobile | Layout › Columns = 3 / 2 / 1 |
| Move more than one slide at a time | Layout › Slider slide move |
| Auto-advance the slider | Advanced settings › Slider functionality = Autoplay (+ interval) |
| Continuous marquee scroll | Advanced settings › Slider functionality = Auto scroll (+ type Loop) |
| Reverse the scroll direction | Advanced settings › Change the direction of slider |
| One testimonial at a time, fading | Advanced settings › Type of slider = Fade |
| Let neighbors peek at the edges | Advanced settings › Show all slides in viewport |
| Fade the slider edges | Slider settings › Add mask at both corners |
| Pause on hover | Advanced settings › Pause on hover |
| Arrows outside the slider | Slider arrows › Arrow location = Outside slider |
| Custom arrow icons | Slider arrows › Arrows › Right / Left arrow |
| Use initials instead of a photo | Content › Show author visual as = Author initials |
| Show star ratings | Content › Show rating star |
Field reference¶
The editor is organized into a Content tab and a Style tab. Full field lists are grouped exactly as they appear in HubSpot. (229 fields total - expand each group as needed.)
Content tab¶
Section background settings
| Field | Type | Options | Default |
|---|---|---|---|
| Type | choice | none / color / gradient / image / video | none |
| Upload background image | image | - | - |
| Video | file | - | - |
Click to update content
| Field | Type | Default |
|---|---|---|
| Add quote sign above review | boolean | off |
| Quote sign | choice (fill/stroke, top/down) | top_stroke |
| Do you want to add company logo? | boolean | off |
| Add review ratings | boolean | off |
| Show author visual as | choice (none / photo / initials) | author_photo |
Testimonials (repeater, per item): Author name, Author designation, Company logo, Author photo, Review text (rich text), Review rating (0 to 5, decimals show half stars).
Drag to section name / Developer use only
- Section name: custom anchor name for in-page links.
- Add custom css here: per-module CSS injection field.
Style tab¶
Color scheme
| Field | Options | Default |
|---|---|---|
| Color scheme | light / dark | light |
Drives the section's surface and text tokens. Set the background Type to none (shown as "Default (scheme)") to let the scheme supply the background colour.
Section background settings
Color: Primary, Secondary, Tertiary, Light, Dark, White, Black, White transparent, or a custom color or custom gradient (default bg-light). Image / video overlay (none / solid / gradient, plus a custom overlay color or gradient) and position, optional blur, parallax (scale + speed), and dual radial glows (color, position, size, opacity - defaults secondary and tertiary).
Section divider settings
Divider type: none / shape / border / shadow.
- Border divider: from top/bottom/both, width, color (default
--tertiary). - Shadow divider: regular/light/dark/custom with x/y/blur/spread/color.
- Shape divider: 25 shapes, top/bottom/both, flip/invert, color or gradient, responsive heights.
Section spacing settings
| Field | Options | Default |
|---|---|---|
| Top | top-y-0 to top-4xl | top-xl |
| Bottom | bottom-y-0 to bottom-4xl | bottom-xl |
| Left | left-x-0 / left-m / left-l / left-xl | left-m |
| Right | right-x-0 / right-m / right-l / right-xl | right-m |
Top and Bottom also accept custom, which reveals Custom top / Custom bottom number fields for desktop, tablet, and mobile (defaults 80 / 60 / 40).
Layout settings
- Columns: slides per view per breakpoint (default 3 / 2 / 1).
- Gap between column: per-breakpoint gap (default 24 each).
- Slider slide move: slides advanced per step per breakpoint (default 1 each).
- Section wrapper container: default / full-width / 8 presets 384px to 1152px / custom + block alignment.
- Inner content container: independent inner width + alignment.
Card
Same optional card chrome as the grid: Make a card (off by default), content alignment, background (+ glass blur), border, responsive padding, shadow, and round corner. Styling only applies when Make a card is on.
Slider settings
- Slider navigation:
none/dots/arrows/both(defaultdots). - Slider arrows: custom left/right icons, icon color, background (color/gradient), border, round corner, size (desktop/mobile), spacing, and Arrow location (inside / outside slider).
- Slider dots: width/height, round corner, border, with separate simple and active colors (active default
--secondary). - Add mask at both corners: fade effect on the left and right edges.
Advanced settings
| Field | Options | Default |
|---|---|---|
| Type of slider | loop / slide / fade | loop |
| Slider functionality | simple / autoplay / auto_scroll | simple |
| Autoplay interval time | number (ms) | 2000 |
| Speed of slider | 0.5 / 1 / 2 / 3 / 4 | 1 |
| Change the direction of slider | boolean | off |
| Show all slides in viewport | boolean | off |
| Pause on hover | boolean | on |
Preset Settings (key groups)
Each element has its own typography, color, and spacing controls:
- Author name / designation: tag or preset (or custom per-screen size), color, bold, spacing.
- Author review: preset or custom size, color, spacing.
- Author photo / initials: sizing (desktop/mobile) + round corner; initials add background (default
bg-primary), text color, font size, bold. - Testimonial bottom: arrangement (row / column), gap, Element at (top / bottom), vertical alignment.
- Rating star: fill / blank color, size, gap, Rating star at (top / bottom).
- Quote sign: color (default
--primary), size, spacing. - Author company logo: spacing, max logo width (%), grayscale toggle, Author logo at (top / bottom).
Tips & gotchas¶
Clean marquee setup
For a continuous auto-scroll slider, set Type of slider to loop and Slider navigation to none so there are no dots or arrows competing with the motion.
Fade ignores per-view counts
When Type of slider is fade, the slider shows one testimonial at a time and ignores the slides-per-view and slides-per-move settings.
Pause on hover is on by default
Autoplay pauses while the pointer is over the slider. If you want it to keep advancing regardless, turn Pause on hover off.
Frequently asked questions¶
What's the difference between Autoplay and Auto scroll?
Autoplay advances a full page of testimonials at a fixed Autoplay interval time and can pause on hover. Auto scroll instead moves continuously at a constant Speed of slider, for a marquee-style effect. They're two different Slider functionality options, so only one set of fields applies at a time.
Does 'Pause on hover' work with Auto scroll?
No. Pause on hover only applies when Slider functionality is set to Autoplay. Auto scroll keeps moving regardless of the pointer.
Can I reverse the scroll direction?
Only in Auto scroll mode, using Change the direction of slider. It has no effect under Autoplay or Simple.
How many testimonials show at once?
Set Layout › Columns per breakpoint (1 to 6 desktop). Under Type of slider = Fade, this is ignored and the slider always shows one at a time.
Can I show 3 testimonials per view but only move 1 at a time?
Yes. Layout › Columns controls how many show at once, and Layout › Slider slide move controls how many advance per click or swipe, so the two can differ.
Are there more transition styles than loop, slide, and fade?
No. Type of slider only offers those three.
Related modules¶
- Testimonial - Grid: the same testimonial cards in a static grid, all visible at once.
- Quote: a single featured pull-quote with a photo column and content box.
- Logo Slider: a rotating strip of customer logos without review text.