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: Add review ratings, quote sign, and Do you want to add 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 › Large / Medium / Small | 3 / 2 / 1 |
| Slider dots › Active state › Dot 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 corner |
| Pause autoplay 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 › Add review ratings |
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 token (default bg-white), gradient (bg-gradient-1 to 3), image / video overlay (none / bg-overlay-1 to 6) 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-l |
| Bottom | bottom-y-0 to bottom-4xl | bottom-l |
| 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 / 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 corner: 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.
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.