Logo Slider¶
A horizontal carousel of brand or client logos that slides through a set number of logos per view, with arrows, dots, autoplay, or continuous auto scroll. Best for: "Trusted by" rows, client logo walls, partner and sponsor marquees, press mentions, integration logos.
📷 Hero image
Target file: assets/img/logo-slider/hero.webp
A horizontal carousel of brand logos on a Light background, showing several logos per view in one clean row with soft faded edges on the left and right. Render the logos in muted greyscale so the strip reads as a calm marquee of social proof. Suggest gentle motion by letting the edge logos partially bleed into the fade. Captured at desktop width.
At a glance¶
Social proof Slider Marquee
- What it does: renders each logo as a slide in a Splide carousel. You set logos-per-view per breakpoint, the gap, the run mode (drag / autoplay / continuous auto scroll), navigation (arrows / dots / both), and an optional edge fade.
- Best used for: a large roster of logos that would not fit in one static row, or a marquee that gently keeps moving.
- Not the right fit if: you want every logo visible at once with no motion (use Logo Grid), or you need rotating quotes rather than logos (use Testimonial Slider).
- 🔗 Live demo: (add demo link)
Add it to your page¶
- In the HubSpot page editor, click Add and search for Logo Slider.
- Drag it onto your page, usually in a social-proof band under the hero.
- Open Click to update content › Logos and upload each logo image.
- (Optional) Turn on Apply a link on logo for any logo that should link out.
- In the Style tab, set Columns (logos per view) per breakpoint under Layout settings.
- Under Slider settings › Advanced settings, pick a Slider functionality (simple / autoplay / auto scroll) and Type of slider (loop / slide).
Design recipes¶
Each recipe is a look plus the exact fields to reproduce it.
Logos scroll endlessly with faded edges and no dots.
📷 Result
Target file: recipe-continuous-marquee.webp
A single row of greyscale logos scrolling as a continuous marquee, with both edges softly faded and no dots or arrows. Capture the track mid-scroll so a logo is partly cut off at each faded edge.
| Field | Set to |
|---|---|
| Advanced settings › Slider functionality | auto_scroll |
| Advanced settings › Type of slider | loop |
| Slider settings › Slider navigation | none |
| Slider settings › Add mask at both corner | on |
Slides advance on a timer with pagination dots.
📷 Result
Target file: recipe-autoplay-with-dots.webp
A row of logos with a line of pagination dots centered below the track. The active dot is filled in the Secondary color while the others stay muted.
| Field | Set to |
|---|---|
| Slider settings › Slider navigation | dots |
| Advanced settings › Slider functionality | autoplay |
| Advanced settings › Autoplay interval time | 2000 (ms) |
| Slider dots › Active state › Dot background color | secondary |
Prev / next arrows placed outside the track.
📷 Result
Target file: recipe-arrow-carousel.webp
A row of logos with circular prev and next arrow buttons sitting just outside the left and right ends of the track. Show both arrows clearly at desktop width.
| Field | Set to |
|---|---|
| Slider settings › Slider navigation | arrows |
| Slider arrows › Arrow location › Arrangement | outside_slider |
| Slider arrows › Arrows › Right / Left arrow | your chosen chevrons |
Each logo sits inside a bordered card.
📷 Result
Target file: recipe-carded-logos.webp
Each logo centered inside its own bordered, rounded card, with the cards lined up as slides of uniform height across the track on a Light background.
| Field | Set to |
|---|---|
| Card › Make a card | on |
| Card › Border › Show border | on |
| Card › Round corner › Card round corner | round-m |
| Logo › Maintain by | height |
"I want to..." quick reference¶
| Goal | Setting |
|---|---|
| Endless scrolling marquee | Advanced settings › Slider functionality = auto_scroll + Type of slider = loop |
| Auto-advancing slides | Slider functionality = autoplay (+ Autoplay interval time) |
| Reverse the scroll direction | Advanced settings › Change the direction of slider |
| Show prev/next arrows | Slider navigation = arrows (or both) |
| Show pagination dots | Slider navigation = dots (or both) |
| Arrows outside the track | Slider arrows › Arrow location › Arrangement = outside_slider |
| Logos grey at rest, color on hover | Logo › Hover effect › Remove grayscale |
| Logos grow on hover | Logo › Hover effect › Increase scale (+ Scaling on hover) |
| Uniform logo heights | Logo › Maintain by = height (+ Logo height) |
| Wrap each logo in a card | Card › Make a card (+ background / border / shadow / round corner) |
| Fade the left/right edges | Slider settings › Add mask at both corner |
| Add a link to a logo | Logos item › Apply a link on logo (+ Link) |
| 5-up desktop / 3-up tablet / 2-up mobile | Layout › Columns = 5 / 3 / 2 |
Field reference¶
The editor is split into a Content tab and a Style tab. Groups below match the HubSpot editor. (207 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
Logos (repeater) - per item: Logo (image), Apply a link on logo (boolean, off), Link (link).
Drag to section name
Section name (text): sets the section ID so scroll-to-section buttons elsewhere can link here.
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
Background color (bg-primary to bg-color-3, default bg-white) or gradient (bg-gradient-1 to 3). Image / video overlay style (none / bg-overlay-1 to 6) and position. Optional blur and parallax (scale / speed).
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
| Field | Type | Default |
|---|---|---|
| Columns (logos per view) [large / medium / small] | number | 5 / 3 / 2 |
| Gap between column [large / medium / small] | number | 24 / 24 / 24 |
| Slider slide move [large / medium / small] | number | 1 / 1 / 1 |
Plus Section wrapper container and Inner content container (default / full-width / custom per breakpoint + alignment).
Card
| Field | Type | Default |
|---|---|---|
| Make a card | boolean | off |
| Background | choice (none / tokens / gradient / custom) | none |
| Show border | boolean | off |
| Card padding [large / medium / small] | spacing | 24px all |
| Card shadow | choice | shadow-none |
| Card round corner | choice (round-0 to round-xxl / custom) | round-s |
Background also supports an optional backdrop blur (glass effect) with adjustable radius.
Preset Settings - Logo
| Field | Type | Default |
|---|---|---|
| Maintain by | choice (width / height / none) | width |
| Logo width | number | 120 |
| Logo height | number | 80 |
| Logo alignment | choice (left / center / right) | center |
| Logo effect on hover | choice (none / remove_grayscale / increase_scale) | remove_grayscale |
| Scaling on hover | number | 1.05 |
Both mobile width and mobile height overrides are available; leave empty to inherit the desktop value.
Slider settings
- Slider navigation:
none/dots/arrows/both(defaultdots). - Slider arrows: custom left / right icons (default chevrons), background, icon color, border, round corner, spacing, size, and Arrangement (
inside_slider/outside_slider, default outside). - Slider dots: width / height, round corner, plus separate simple and active dot colors.
- Advanced settings: Type of slider (
loop/slide), Slider functionality (simple/autoplay/auto_scroll), autoplay interval, transition speed, auto-scroll speed preset, and Change the direction of slider. - Add mask at both corner: fade the left and right edges of the track.
Developer use only
Add custom CSS here: per-module CSS injection field.
Tips & gotchas¶
Auto scroll wants loop + no dots
For a smooth marquee, set Slider functionality to auto_scroll and Type of slider to loop. Removing dots (Slider navigation = none) gives the cleanest continuous look.
Autoplay interval only applies in autoplay
Autoplay interval time controls the pause between slides in autoplay mode only. In auto_scroll mode use Speed of slider instead; in simple (drag) mode neither applies.
Uniform rows come from height sizing
If logos look ragged, set Maintain by to height so every logo shares the same height and the row reads as one clean line.
Related modules¶
- Logo Grid: the same logos as a static wall where all of them stay visible at once.
- Testimonial Slider: a carousel of customer quotes instead of logos.
- Counter: animated stat numbers to pair with your logo proof.
- Section Title: a standalone heading block to introduce the slider.