> For the complete documentation index, see [llms.txt](https://modutheme.gitbook.io/helix/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://modutheme.gitbook.io/helix/global-sections/banners/slideshow.md). # Slideshow A rotating banner of slides, each with its own media, overlay, and content blocks. Slides can be single-panel or split, using an image or a video. ![Slideshow section overview](/files/6GcgblSnf9uSQ0Z7SMZ4) *** ## Settings ### Appearance | Setting | Description | | ---------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Width | **Page** — Keeps the content within the page width set in your theme settings. **Full** — Stretches the content across the full browser width, with a small space at the edges. **Full (no padding)** — Stretches the content across the full browser width, with no space at the edges. | | Show next slide preview on desktop | Reveals part of the next slide to hint that slides can be swiped. Page width only. | | Transition style | How slides change: **Slide** scrolls horizontally, **Fade** dissolves between slides. Fade is unavailable when the next-slide preview is on. | | Full-width content | Stretches the content blocks edge to edge within each slide. Full and Full (no padding) only. | | Allow transparent header | Lets the header float over the section. Full (no padding) only, and only when this is the first section on the page. | | Corner radius | Rounding of the section corners. Not available in Full (no padding). | | Color scheme | Background color behind the section. Not available in Full (no padding). | ### Height | Setting | Description | | ---------------- | ---------------------------------------------------------------------------------------------------------------------------- | | Desktop / Mobile | Slide height for each device — a fixed size, Adapt (matches the media's natural ratio), or Full screen (fills the viewport). | ### Slide autoplay | Setting | Description | | -------------- | ------------------------------------------------------- | | Autoplay | Advances slides automatically on a timer. | | Pause on hover | Stops the timer while the cursor is over the slideshow. | | Speed | Time each slide stays before advancing. | ### Navigation | Setting | Description | | --------------- | --------------------------------------------------------------------------------------------- | | Show navigation | Shows previous / next arrow buttons. | | Style | Visual style of the arrow buttons. | | Icon | Icon shown inside the arrow buttons, such as an arrow or chevron. | | Behavior | **Show on hover** — arrows appear on mouse-over. **Always show** — arrows are always visible. | ### Pagination | Setting | Description | | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------- | | Show pagination | Shows slide position indicators. | | Type | Indicator style: **Progress bar**, **Bullets**, or **Numbers**. | | Full width bottom | Runs the progress bar edge to edge along the bottom of the slideshow. Turn it off to place and size the bar yourself. Progress bar only. | | Max width | The widest the progress bar can run. Available when Full width bottom is off. | | Position — Desktop | Placement of the indicator on desktop. | | Position — Mobile | Independent placement on mobile. | ### Padding | Setting | Description | | ------------------------- | ---------------------------------------------------------------------- | | Top / Bottom | Space above and below the section. Not available in Full (no padding). | | Custom padding for mobile | Set independent padding values for mobile. | *** ## Available Blocks ### Slide #### Slide Settings | Setting | Description | | ---------------------------------------- | ---------------------------------------------------------------------------------------------- | | Layout | **Classic** — one media panel filling the slide. **Split** — two media panels side by side. | | Link | Makes the whole slide clickable. | | Open link in new tab | Opens the slide link in a new browser tab. | | Type | Image or video for the panel. | | Image | The slide image. | | Mobile Image (optional) | Separate image for mobile. Classic layout only. | | Video | Shopify-hosted video. | | Mobile video (optional) | Separate video for mobile. Classic layout only. | | Media 2 — Type / Image / Video | The second media panel, with its own image or video. Available for Split layout. | | Mobile (optional) — Type / Image / Video | A single media that replaces the split on mobile. Available for Split layout. | | Show overlay | Adds a color layer over the media, to keep text legible. | | Overlay color | Color and opacity of the overlay. | | Parallax effect | Scroll motion for the slide media, such as vertical, horizontal, or zoom. Classic layout only. | | Desktop position / Mobile position | Where the content sits on the slide, set independently per device. | | Desktop gap / Mobile gap | Spacing between the content blocks. | | Color scheme | Color scheme for the slide's content. | #### Slide Blocks Blocks you can add inside a Slide. | Block | Description | | ----------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | | [Heading](/helix/theme-blocks/basic/heading.md) | Main headline. | | [Subheading](/helix/theme-blocks/basic/subheading.md) | Small label above or below the heading. | | [Text](/helix/theme-blocks/basic/text.md) | Rich-text paragraph for supporting copy. | | [Button](/helix/theme-blocks/basic/button.md) | Single call-to-action with label, link, and style. | | [Buttons](/helix/theme-blocks/basic/buttons.md) | Two side-by-side buttons. | | [Image](/helix/theme-blocks/basic/image.md) | Inline image within the content, such as a logo or badge. | | [Icon](/helix/theme-blocks/basic/icon.md) | An icon from the theme library, shown inline. | | [Divider](/helix/theme-blocks/layout/divider.md) | A horizontal line between content blocks. | | [Spacer](/helix/theme-blocks/layout/spacer.md) | Empty block for adjusting vertical spacing. See [How to set up custom spacing](/helix/how-to-guides/how-to-set-up-custom-spacing.md) for per-breakpoint values. | | [Product Card](/helix/theme-blocks/cards/product-card-compact.md) | A compact product card, for shoppable slides. | | [Group](/helix/theme-blocks/layout/group.md) | A row that arranges several blocks side by side. | | [Popup](/helix/theme-blocks/links/popup.md) | A button that opens an overlay, such as a video or extra detail. | | [Countdown Timer](/helix/theme-blocks/basic/countdown-timer.md) | A live countdown to a set date. | | [Product Finder](/helix/theme-blocks/product/product-finder.md) | A short quiz that recommends a collection from the shopper's answers. | | [Colors](/helix/theme-blocks/basic/colors.md) | A swatch selector for showing color variants. |