# Slideshow

> A sequence of full-width banners, each with its own image or video, overlay, text and buttons. Slides change on their own or with arrows, swipes and the keyboard.

Tally theme documentation · HTML version: https://themelab.page/tally/docs/sections/slideshow/

## At a glance

- **In the editor:** Slideshow
- **Where it goes:** Any page template, with Add section
- **In the presets:** Poster: Home page
- **Settings:** 18
- **Blocks:** Slide
- **App blocks:** Yes

## When to use it

Use a slideshow when you have two to four equally important stories – a new collection, a sale, a brand story – and want them all at the top of the page. The Poster preset opens its home page with one. If one message matters most, an [Image banner](https://themelab.page/tally/docs/sections/image-banner.md) is stronger.

## Set it up

1. Add a **Slide** block for each story.
2. In each slide, upload an **Image** (and a **Mobile image** if needed), then write the label, heading, text and buttons.
3. Choose the section's **Height**, **Transition** and whether slides **change automatically**.
4. Give the slideshow an **Accessible name**, such as *Spring collection*, for screen readers.

## Each slide

Slides have the same options as the [Image banner](https://themelab.page/tally/docs/sections/image-banner.md): an optional **Video** that loops over the image, an **Overlay** (solid, gradients, vignette or duotone), **Content position** for desktop and mobile, an optional **Content background** (card or frosted glass), and two buttons with their own styles. Each slide can look different – one dark and dramatic, the next light and airy.

## Movement

- **Transition:** *Slide* moves the slides sideways like a strip of film; *Fade* crossfades them in place.
- **Change slides automatically:** advances after **Time per slide** (3–12 seconds). It pauses on hover and as soon as a shopper uses the controls, and it stays off for shoppers who reduce motion.
- Shoppers can swipe on touch screens and use the arrow keys when the slideshow has focus.

## Controls

- **Show arrows:** previous and next buttons.
- **Slide indicator:** *Dots*, *Lines* (each fills up while its slide is shown), a *Counter* (*2 / 4*) or *None*.
- **Controls position:** *On the image*, or *Below the image* for a calmer photo.

> **Tip:** Fewer slides, read more often
>
> Most shoppers see the first slide only. Put your strongest story first, keep the slideshow to three or four slides, and give each slide enough time to be read.

## All settings

Every setting in the order of the theme editor, with its options and its default value.

**Section: Slideshow** (18 settings, in editor order)

| Setting | Options | Default |
| --- | --- | --- |
| **Height** | Small · Medium · Large · Full screen | Large |
| **Full width** | Checkbox | On |
| **Transition** | Slide · Fade | Fade |
| **Change slides automatically** – Pauses on hover and when the shopper uses the controls. Shoppers who reduce motion change slides themselves. | Checkbox | On |
| **Time per slide** | 3–12s (step 1) | 6s |

*Navigation*

| Setting | Options | Default |
| --- | --- | --- |
| **Show arrows** | Checkbox | On |
| **Slide indicator** | Dots · Lines · Counter · None | Lines |
| **Controls position** | On the image · Below the image | On the image |
| **Accessible name** – Read by screen readers, for example Spring collection. | Text | Sample text |
| **Color scheme** | Color scheme | Scheme 2 |

*Section spacing*

| Setting | Options | Default |
| --- | --- | --- |
| **Top padding** | 0–160px (step 4) | 0px |
| **Bottom padding** | 0–160px (step 4) | 0px |
| **Top padding on mobile** | 0–120px (step 4) | 0px |
| **Bottom padding on mobile** | 0–120px (step 4) | 0px |

*Advanced*

| Setting | Options | Default |
| --- | --- | --- |
| **Hide on mobile** | Checkbox | Off |
| **Hide on desktop** – Mobile means below the width where the header switches to the mobile menu (Header > Switch to the mobile menu below). | Checkbox | Off |
| **Animate on scroll** | Checkbox | Off |
| **Anchor ID** – Link to this section with #anchor-id. | Text | – |

## Block settings

**Block: Slide** (22 settings, in editor order)

| Setting | Options | Default |
| --- | --- | --- |
| **Image** | Image | – |
| **Mobile image** – Optional. Shown on small screens. | Image | – |
| **Video** – Optional. Plays muted on a loop over the image, which stays as the poster and on slow connections. | Video file | – |

*Overlay*

| Setting | Options | Default |
| --- | --- | --- |
| **Overlay style** | Solid · Gradient from bottom · Gradient from left · Vignette · Duotone | Gradient from bottom |
| **Overlay color** | Color | #161616 |
| **Overlay opacity** | 0–90% (step 5) | 35% |

*Content*

| Setting | Options | Default |
| --- | --- | --- |
| **Content position on desktop** | Top left · Top center · Top right · Middle left · Middle center · Middle right · Bottom left · Bottom center · Bottom right | Bottom left |
| **Content position on mobile** | Top · Middle · Bottom | Bottom |
| **Text alignment** | Left · Center | Left |
| **Content background** | None · Card · Frosted glass | None |
| **Content background color scheme** | Color scheme | Scheme 2 |
| **Text color without background** | Color | #FFFFFF |
| **Label** | Text | – |
| **Heading** | Rich text (one line) | Sample text |
| **Heading size** | Extra large · Large · Medium | Large |
| **Text** | Rich text | Sample text |
| **First button label** | Text | Sample text |
| **First button link** | Link | – |
| **First button style** | Primary · Secondary · Highlight | Highlight |
| **Second button label** | Text | – |
| **Second button link** | Link | – |
| **Second button style** | Primary · Secondary · Highlight | Secondary |

## Related

- [Image banner](https://themelab.page/tally/docs/sections/image-banner.md): A large photo or video with a heading, text and up to two buttons on top – full width or within the page.
- [Hero](https://themelab.page/tally/docs/sections/hero.md): The catalog opener – a big headline and short text beside a framed image, with quick links to what shoppers look for most.
- [Lookbook](https://themelab.page/tally/docs/sections/lookbook.md): A horizontal row of large images in mixed shapes that shoppers drag or swipe through, with products on the photos.