Docs / Cards & Grids / Sliding Image Gallery
A peek-ahead carousel of slide images with auto-advance, arrow + dot controls, and optional overlay or below-image text. Use it for project galleries, product shots, event photos, or any moment a page needs a scannable, animated visual sequence.
The most-used controls live here so editors can configure the gallery's heading, slide text behavior, and motion without scrolling.
Controls whether the section heading area (badge h6, title h2, description p) appears above the slider. Turn it off when the gallery follows a stronger heading from the row above and you want the slides to read as a continuation.
Text alignment for the heading area on desktop (993px and above).
left Left-alignedcenter Centered (default)right Right-alignedText alignment for the heading area on tablet and mobile (below 992px). Set independently from desktop so editors can center on phones while keeping desktop left-aligned.
left Left-alignedcenter Centered (default)right Right-alignedShow or hide the text area for each slide. Turn off if the gallery is purely image-driven and the captions would be visual noise.
Place text on top of the image (with position control) or below the image (between the image and the dots).
overlay Within Image (overlay) - text sits on top of the slide image (default)below Below Image - text drops beneath the image, above the dotsHorizontal text alignment inside each slide's text area.
left Left-alignedcenter Centered (default)right Right-alignedVertical position of text within the image.
bottom Bottom (default)center Centertop TopStop auto-scroll animation. Arrows and dots still work, so visitors can advance manually. Useful for galleries where the imagery rewards careful reading.
Triggers an IntersectionObserver-driven fade on the section heading when it scrolls into view. The fade adds a 30px slide from the chosen direction plus opacity.
none No animation (default)bottom Fade Up (slides up from below)top Fade Down (slides down from above)left Fade from Leftright Fade from Rightfade Fade Only (no slide)Reduced motion: When a visitor has prefers-reduced-motion: reduce, the animation is skipped and the heading renders fully visible.
The section heading and the repeating slide collection. Every slide is its own image + rich-text pair.
The badge + title + description block above the slider. The default markup is <h6> (rendered as a pill badge if Badge Style is enabled), <h2> for the title, and <p> for the description. Keep the h6 short (2-4 words) so the badge pill stays compact.
The repeating gallery items. Each slide is its own image + rich-text pair. Add as many as the story needs; the slider handles 3+ cleanly with the peek-ahead carousel effect.
The image for this slide. Responsive sizing is on by default; the HubSpot file manager handles SRC + alt text. Upload images at a consistent aspect ratio (the slider crops to a fixed pixel height set in Card Settings) so slides look uniform as they advance.
Tip: Use a unique filename when you replace a slide image; HubSpot's CDN caches by URL, so overwriting a file with the same name can leave visitors seeing the stale image for hours.
The rich text for this slide. Default markup is <h5> for the slide title and <p> for a short description. Keep it brief; overlay text especially benefits from a short headline plus one sentence.
Triggers an IntersectionObserver-driven fade on the entire slider when it scrolls into view. The fade adds a 30px slide from the chosen direction plus opacity.
none No animation (default)bottom Fade Up (slides up from below)top Fade Down (slides down from above)left Fade from Leftright Fade from Rightfade Fade Only (no slide)Reduced motion: When a visitor has prefers-reduced-motion: reduce, the animation is skipped and the gallery renders fully visible.
Developer hooks for adding custom CSS or JS targeting. Leave blank for most pages.
Sets an id="..." on the section element. Must be unique on the page. Only use one. Useful for anchor links (e.g. #gallery) and JS targeting.
Additional CSS classes (space-separated) appended to the section element's class list. Useful when applying page-specific overrides via the page's custom CSS.
Everything visual: card geometry and image height, the overlay wash on neighbor cards, auto-scroll timing, arrow + dot controls, badge styling, section dividers, and the row's background/width/spacing.
Rounded corners on each slide card. 12px matches the theme's default tile rounding; 0 for hard corners, 24+ for softer, pill-like edges.
Background color of each slide card behind the image. Visible only when the image has transparency or the card has padding. The group's default object also sets a #0d1c14 fallback at 100% opacity for use cases that need a solid card surface.
Horizontal gap between slide cards. Larger gaps create more breathing room between the active card and the peek-ahead neighbors; smaller gaps pack cards tightly for an edge-to-edge feel.
Fixed height for slide images on screens above 768px. Images crop to this height to keep slides uniform as they advance. Choose a height that flatters the most common aspect ratio in your gallery.
Fixed height for slide images on screens below 768px. Typically smaller than desktop so the gallery doesn't dominate the mobile viewport.
Color wash on the left and right peek-ahead cards. Set this to match the section background so the neighbor cards visually recede and the active card pops forward.
Seconds between each automatic slide transition. 4 seconds is a comfortable pace for most galleries; bump to 6-8 if slide text needs longer to read, or drop to 2-3 for fast-paced visual loops.
Show or hide the previous/next arrow buttons. Hide if the gallery should rely on dots + auto-scroll alone, or if arrows clash with the visual style of the section.
Background color of the circular arrow buttons. 90% opacity by default so a hint of the slide bleeds through.
Color of the chevron icon inside each arrow button. Choose a color with strong contrast against the arrow background.
Diameter of the circular arrow buttons. 44px hits the touch-target sweet spot for mobile while still feeling unobtrusive on desktop.
Show or hide the slide indicator dots beneath the gallery. Hide for a cleaner look when arrow controls are enough.
Color of the dot that represents the currently visible slide.
Color of the dots for slides that are not currently visible. Usually the same hue as the active dot but at a reduced opacity for visual hierarchy.
Diameter of each indicator dot. 10px is a good baseline; bump higher if the dots feel lost beneath a large gallery.
Styles the <h6> inside the section heading as a pill badge instead of a plain heading.
Fill color of the pill badge.
Border color of the pill badge. Use a tint slightly darker than the badge background for a subtle outline, or match the background for a borderless look.
Text color for the badge label.
Decorative SVG shapes that sit at the top or bottom of the section, useful for blending into the section above or below.
Decorative shape at the top of the section. Choose from 9 shape options; the shape is rendered as an inline SVG matching the divider color you choose.
none No divider (default)wave-1 Wave 1 (Gentle)wave-2 Wave 2 (Sharp)wave-3 Wave 3 (Multi)wave-4 Wave 4 (Smooth)wave-5 Wave 5 (Layered)tilt Tilt (Angled)curve Curve (Arc)triangle TriangleVertical height of the top divider shape. Higher values give the shape more presence.
Set this to match the background color of the section above so the divider visually melts into the seam.
Mirrors the top divider shape horizontally. Useful when alternating between sections to keep waves flowing in opposite directions.
Decorative shape at the bottom of the section. Same 9 shape options as Top Divider.
none No divider (default)wave-1 Wave 1 (Gentle)wave-2 Wave 2 (Sharp)wave-3 Wave 3 (Multi)wave-4 Wave 4 (Smooth)wave-5 Wave 5 (Layered)tilt Tilt (Angled)curve Curve (Arc)triangle TriangleVertical height of the bottom divider shape.
Set this to match the background color of the section below so the divider visually melts into the seam.
Mirrors the bottom divider shape horizontally.
The section's wrapping row controls: background (color, gradient, image), content width, and per-breakpoint padding.
The Background Type dropdown drives which sub-controls appear:
none No background (default; section inherits the page bg)color Solid Color - reveals Background Color pickergradient Gradient - reveals Top Color, Bottom Color, and 8 direction optionsimage Image - reveals Background Image, Size (cover/contain/original), Position (9-point), Overlay toggle, Overlay Color, Blur toggle, Blur amountNote: The "Background" group is labeled "Image, Video, Color, etc." in the editor but the current build does not include a video background option - the Background Type select only exposes none/color/gradient/image.
standard Standard (uses theme's standard container width, set in Theme Settings > Layout)slim Slim (narrower variant, also set in Theme Settings)custom Custom - reveals a Custom Width number input (600-1920px, default 1200)Padding controls for the row, set independently for desktop, tablet, and mobile. Each breakpoint exposes a top/bottom/left/right spacing input. Defaults:
desktop 100px top, 100px bottom, 0 left, 0 righttablet 60px top, 60px bottom, 0 left, 0 rightmobile 40px top, 40px bottom, 15px left, 15px right