> For the complete documentation index, see [llms.txt](https://staylime.com/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://staylime.com/docs/avante-themes/sections/banners/slideshow-with-media.md).

# Slideshow with media

A rotating hero of image and video slides, each with its own heading, two buttons, countdown timer, and separate mobile media.

Use Slideshow with media when the top of the page has to carry more than one message — a sale, a new arrival and a service promise — without stacking three heroes on top of each other. Each slide is self-contained, so you can retire one and leave the rest untouched.

### How to add

{% stepper %}
{% step %}

#### Add the section

In the theme editor, click **Add section → Slideshow with media**.
{% endstep %}

{% step %}

#### Add your slides

Use **Add block → Image** for a still slide or **Loop video** for a moving one. You can mix both in the same slideshow.
{% endstep %}

{% step %}

#### Fill each slide

Open a slide and set its media, then its **Subheading**, **Heading**, **Text** and up to two buttons, each with its own label, link and style. A **Context image** block slot is available for a logo or badge above the heading.
{% endstep %}

{% step %}

#### Upload mobile media

Every slide has a **Mobile image** or **Mobile video** of its own. The mobile file is used on screens up to 768 px wide.
{% endstep %}

{% step %}

#### Set the height

**Height mode** applies to the whole slideshow: **Percents** (default — 70% desktop, 60% mobile), **Pixels**, or **Adapt to first image**, which sizes every slide to the proportions of the first one.
{% endstep %}

{% step %}

#### Tune the rotation

**Enable autoplay** is on by default. **Autoplay speed** sets how long a slide stays, from 3 to 10 seconds (7 by default). **Desktop controls** switch between **Classic arrows** and **Arrows with numbers**, aligned left, center or right.
{% endstep %}
{% endstepper %}

### Good to know

**Height is set once, for all slides.** Because the section holds a single height, slides with different proportions are cropped to fit it. **Adapt to first image** takes the ratio of the *first* slide, so reordering the slides changes the height of the whole section.

**Each slide carries its own countdown.** The countdown timer lives on the slide, not on the section, so a sale slide can run a timer while the other slides stay evergreen. You set an end date, an end time, and what happens once it passes.

**Loop video slides have the full video controls** — **Enable pause control**, **Enable mute control** and their **Horizontal position** — the same ones as [Video banner](/docs/avante-themes/sections/banners/video-banner.md). Sound only starts when a visitor taps the mute control.

**Slide colors are inverted by default**, which assumes light text on darker media. Switch the slide's color scheme if the media is pale.

{% hint style="warning" %}
A slideshow loads every slide's media. Three strong slides outperform eight weak ones, both for conversion and for load time. The theme editor shows the same warning for the same reason.
{% endhint %}

**Background animation** is available on the section and has no **Sticky** option here — only **Parallax**, **Zoom in** and **Zoom out**. See [Background animation](/docs/avante-themes/features-and-advanced-setup/background-animation.md).

{% hint style="info" %}
Set **Section width** to **Overlap by navigation** to run the slideshow under a see-through navigation bar. See [Transparent header](/docs/avante-themes/features-and-advanced-setup/transparent-header.md).
{% endhint %}

### Customization ideas

* Open with a video slide and follow it with two image slides — the motion catches the eye, the stills carry the offers.
* Give each slide one button for the offer and a second, quieter **outlined** button for the wider collection.
* Turn **Enable autoplay** off on a two-slide hero and let the arrows do the work; a hero that moves on its own can take the message away before it is read.
* Use **Arrows with numbers** when slides are campaign-specific, so visitors can see there is more than one and come back to it.

### Best practices

* Put the most important message first. Most visitors never see slide two.
* Give every slide the same shape of content — a subheading, a heading and one button — so the hero does not jump as it rotates.
* Set autoplay speed to at least 6 seconds if the slides carry a sentence of body text.
* Crop mobile media to portrait (4:5) or square (1:1) rather than reusing the desktop file.

***

### Related

* [Image banner](/docs/avante-themes/sections/banners/image-banner.md)
* [Video banner](/docs/avante-themes/sections/banners/video-banner.md)
* [Background animation](/docs/avante-themes/features-and-advanced-setup/background-animation.md)
* [Transparent header](/docs/avante-themes/features-and-advanced-setup/transparent-header.md)
* [Image & video size recommendations](/docs/avante-themes/faq/performance/image-and-video-size-recommendations.md)
* [Common section settings](/docs/avante-themes/sections/overview.md#common-section-settings)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://staylime.com/docs/avante-themes/sections/banners/slideshow-with-media.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.