Single Column Banner - Slider¶
A multi-slide hero carousel. Each slide has its own background, tag, title, description, buttons, and video button - with shared slider navigation (arrows / dots / progress / counter). Best for: rotating page heroes, campaign carousels, multi-message landing banners.
📷 Hero image
Target file: assets/img/single-column-banner-slider/hero.webp
A full-width hero carousel at the very top of a landing page, captured edge to edge at desktop width. Show the first slide on a dark background (deep navy, or the navy-to-purple Gradient 1). Include a small tag pill near the top, a large bold headline with one word highlighted in the Secondary color, a short supporting paragraph below it, and two buttons side by side (a solid Primary button and a lighter secondary button). Pagination dots sit centered near the bottom, with the active dot in the Secondary color.
At a glance¶
Hero Slider Full-width
- What it does: renders a Swiper-based carousel of hero slides; each slide carries its own background (color / gradient / image / video, with overlays and dual radial glows) and full hero content.
- Best used for: a homepage hero that rotates between messages, a campaign slideshow, or a full-viewport landing banner.
- Not the right fit if: you only need one static hero (use Single Column Banner - Simple) or a hero with an embedded form (use Banner with Form).
- 🔗 Live demo: (add demo link)
Add it to your page¶
- In the HubSpot page editor, click Add and search for Single Column Banner - Slider.
- Drag it to the top of your page (heroes usually sit first).
- Open Click to update content › Slider and add your first slide.
- For each slide, set a Background, then fill in the Title, Description, Tag, and Buttons.
- Add more slides by duplicating the slide item.
- Configure Slider settings (arrows vs dots) and Advanced settings (loop / autoplay).
Design recipes¶
Each recipe is a look plus the exact fields to reproduce it.
A clean slideshow with pagination dots.
📷 Result
Target file: recipe-dots-carousel-default.webp
The hero with pagination dots centered below the content. The active dot is filled in the Secondary color; the inactive dots are muted. Capture the whole hero at desktop width.
| Field | Set to |
|---|---|
| Slider settings › Slider navigation | dots |
| Advanced settings › Type of slider | loop |
| Slider dots › Active state › Slide dots background color | secondary |
Auto-advancing slides with prev/next arrows.
📷 Result
Target file: recipe-arrows-autoplay.webp
The hero with circular prev and next arrow buttons on the left and right edges at mid-height. Show at least one arrow clearly. Desktop width, whole hero visible.
| Field | Set to |
|---|---|
| Slider settings › Slider navigation | arrows |
| Advanced settings › Slider functionality | autoplay |
| Advanced settings › Autoplay interval time | 4000 (ms) |
| Slider arrows › Right icon | your chosen chevrons |
Slides crossfade, with a "1 / 3" indicator.
📷 Result
Target file: recipe-fade-counter.webp
The hero with a "1 / 3" counter indicator in the bottom-right corner. Capture mid-crossfade if possible, otherwise a clean frame with the counter clearly visible.
| Field | Set to |
|---|---|
| Advanced settings › Type of slider | fade |
| Advanced settings › Slider count | on |
| Advanced settings › Counter position | bottom-right |
Each slide is a full-screen image with an overlay.
📷 Result
Target file: recipe-full-viewport-image-slides.webp
The hero filling the full browser height with a photographic background image and a dark overlay, and the content vertically centered. Capture at desktop width so the full-height effect is clear.
| Field | Set to |
|---|---|
| Slide › Background › Choose background | image |
| Slide › Background › Overlay | var(--overlay-1) |
| Layout settings › Make section in full viewport | on |
| Layout settings › Vertical alignment | center |
"I want to..." quick reference¶
| Goal | Setting |
|---|---|
| Show arrows instead of dots | Slider settings › Slider navigation = arrows |
| Show both arrows and dots | Slider settings › Slider navigation = both |
| Auto-advance slides | Advanced settings › Slider functionality = autoplay (+ interval) |
| Crossfade slides | Advanced settings › Type of slider = fade |
| Stop at the last slide | Advanced settings › Type of slider = slide |
| Add a progress bar | Advanced settings › Slider progress (slide type only) |
| Show a "1 / 3" counter | Advanced settings › Slider count (+ position) |
| Per-slide background | Slide › Background › Choose background |
| Glow over a slide | Slide › Background › Add radial glow |
| Custom arrow icons | Slider arrows › Right icon |
| Full-screen carousel | Layout settings › Make section in full viewport |
| Counter badge on the tag | Style the Counter badge background group (renders with the tag) |
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. (295 fields total - expand each group as needed.)
Content tab¶
Section background settings - particle effect
| Field | Type | Options | Default |
|---|---|---|---|
| Particle effect | choice | no_effect / default / snow | no_effect |
| Color | color | - | White @100 |
| Amount of particles | number | - | 100 |
| Size | number | - | 3 |
| Speed | number | - | 0.8 |
| Opacity | number | - | 0.5 |
Slide (repeater) - Background
Each slide's Choose background picks none / image / video / color / gradient and reveals the matching settings:
- Image: image, overlay (
none/--overlay-1 to 6/ custom color / custom gradient), custom overlay colors, gradient degree. - Video: video file + same overlay options.
- Color: token color (default
--light) or custom. - Gradient: token gradient (default
--gradient-1) or custom two-color + degree. - Radial glow (×2): optional soft glow: color (default
secondary/tertiary), position, size, opacity.
Slide (repeater) - Content
| Field | Type | Default |
|---|---|---|
| Add caption title / Caption title | boolean / text | off |
| Add tag / Tag | boolean / text | off |
| Add icon to tag / Tag icon | boolean / icon | Star (SOLID) |
| Title | text | - |
| Add description / Description | boolean / richtext | off |
| Add buttons / Buttons (repeater) | boolean / group | off |
| Add video button / video type | boolean / choice | off / none |
Buttons (per button): Type (link / cta / drag_to_section), Link/CTA/Section name, Style (btn-1 to btn-8, default btn-1), Title, optional Icon.
Style tab¶
Section background settings
- Add pattern: one repeating pattern across the whole slider. Unlike the other modules this is a toggle rather than a background Type, because each slide owns its own background here. The pattern layers over the slides and holds still while they move.
- Pattern style: Grid, Dots, Diagonal lines, Diagonal cross, or Circuit board.
- Pattern color / size: any colour with its own opacity, tile size 8 to 160px.
- Pattern fade / Fade amount: none, top, bottom, left, right, or to the edges, with the amount setting how much of the section is left with no pattern.
Not over an image or video slide
A pattern needs a flat surface to read against. Over a photo or video it shifts a pixel by about 4 percent of its luminance, which the eye cannot resolve once the media has its own texture, and the fade in particular disappears.
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 divider settings
Divider type: none / shape / border / shadow.
- Border divider: from top/bottom/both, width, color (default
--tertiary). - Shadow divider: regular/light/dark/custom shadow 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
- Section wrapper container: default / full-width / 8 presets 384px to 1152px / custom (per breakpoint) + block alignment.
- Inner content container: independent inner width + alignment.
- Alignment: independent center/left/right for tag, caption, title, description, button, video button.
- Maximum content width for element: per-element width cap + alignment.
- Make section in full viewport: vertical + horizontal alignment, mobile viewport-height behavior.
Preset Settings - Title (key fields)
| Field | Type | Default |
|---|---|---|
| Show title as | choice (custom / h1-h6) | h1 |
| Font size [desktop / tablet / mobile] | number | 105 / 70 / 55 |
| Text transform | choice | as_it_is |
| Color | choice (tokens / custom / gradient) | default |
| Spacing under element | Default / 0 / S / M / L / XL / 2XL / 3XL / 4XL | Default |
| Highlight style | none / underline / custom color / gradient / different font | none |
| Text style | none / stroke / image_text | none |
Other element groups: Caption title, Tag, Counter badge background, Description, Button, Video button, Drag to section arrow: each with its own color, spacing, transform, and sizing fields.
Outer box
Optional wrapper around the hero: outer Spacing (responsive), Round corner (default --round-xxl), and Shadow (none / light / dark / regular).
Slider settings
- Slider navigation:
none/dots/arrows/both(defaultdots). - Slider arrows: custom icons, background, icon color, border, round corner, spacing, size.
- Slider dots: width/height, round corner, spacing, border, separate simple and active states (active default
--secondary). - Advanced settings: Type of slider (
loop/slide/fade), Slider functionality (simple/autoplay), autoplay interval, transition speed, optional progress bar, optional slide counter + position.
Developer use only
Add custom CSS here: per-module CSS injection field.
Tips & gotchas¶
Loop vs. progress bar
The progress bar applies to slide-type sliders, not loop. If you want a progress track, set Type of slider to slide first.
Overlays keep text readable
On image/video slides, keep an Overlay (default --overlay-1) so your title and description stay legible over busy backgrounds.
Full-viewport on mobile
Full-viewport height can feel cramped on phones. Use Viewport height [mobile] to remove the fixed height on smaller screens.
Frequently asked questions¶
How do I make slides auto-advance?
Set Advanced settings › Slider functionality to autoplay and set the Autoplay interval time in milliseconds (4000 is a typical starting point).
Why doesn't my progress bar show up?
Slider progress only applies when Advanced settings › Type of slider is slide. It has no effect on loop or fade, so switch the slider type first if you want a visible progress track.
Can each slide have a different background?
Yes. Every slide has its own Choose background (image / video / color / gradient / none) with its own overlay and radial glows, so slides don't have to share a single background.
Can I put a different pattern behind each slide?
No. Add pattern is one shared layer across the whole slider, not a per-slide field, and it holds still while the slides move underneath it. It's also hidden on image or video slides since a pattern needs a flat surface to read against.
How do I show both arrows and dots at the same time?
Set Slider settings › Slider navigation to both. The default is dots; arrows and none are the other two single options.
How do I add a '1 / 3' slide counter?
Turn on Advanced settings › Slider count and set a Counter position, for example bottom-right. It's independent of the progress bar and works with any slider type.
Why is text hard to read on my image or video slides?
Set that slide's Overlay (default --overlay-1) to a solid or gradient tone. Without it, busy photo or video backgrounds can swallow the title and description.
Full-viewport height feels cramped on mobile, how do I fix it?
Set Layout settings › Viewport height [mobile] to drop the fixed full-screen height on phones, so the hero falls back to its normal content height there instead.
Related modules¶
- Single Column Banner - Simple: the same hero without the carousel, for a single static message.
- Multi Column Banner - Slider: when each slide needs multiple columns.
- Banner with Form: a hero with an embedded lead-capture form.