> 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/horizontal-scrolling-banners.md).

# Horizontal scrolling banners

A full-screen band of media and text panels that moves sideways as the visitor scrolls down the page.

This is the most cinematic section in the theme. It takes over the screen and turns a vertical scroll into a sideways one, moving a band of images, videos and text panels past the viewer like a gallery wall. Use it for a campaign, a collaboration or a brand story — somewhere the point is to slow people down rather than move them along.

### How to add

{% stepper %}
{% step %}

#### Add the section

In the theme editor, click **Add section → Horizontal scrolling banners**.
{% endstep %}

{% step %}

#### Add your panels

Use **Add block** to choose between **Media** (an image or looping video), **Text** (a number, heading, copy and button) and **Media with text** (both in one panel). The preset gives you one of each.
{% endstep %}

{% step %}

#### Set each panel's width

**Desktop size** inside the block is **Big**, **Medium** (default) or **Small**. Medium takes half the screen, Small takes a third, Big takes well over three quarters — this is how you control the rhythm of the band.
{% endstep %}

{% step %}

#### Place the copy

On a **Media with text** panel, **Content position** is **Overlay** (default), **Top** or **Bottom**. Overlay puts the text on the media; Top and Bottom split the panel, giving each half the height.
{% endstep %}

{% step %}

#### Add a hint to scroll

Turn on **Show ‘Scroll down’ text on desktop** so visitors know the band responds to scrolling. Set its wording, **Color**, **Position** (Left, Center or Right) and whether it should **Animate**.
{% endstep %}

{% step %}

#### Set the mobile height

The mobile **Height** runs from 30% to 100% of the screen (70% by default). On phones the band becomes a normal sideways swipe.
{% endstep %}
{% endstepper %}

### Good to know

{% hint style="warning" %}
**The section looks “cut off” in the theme editor — that is expected.** By design it fills the whole screen and only one screenful of the band is visible at a time; the rest is waiting off to the right. The editor's preview panel is smaller than a real browser window and the scroll effect often does not run there at all, which makes the section look broken. Open your storefront in its own tab and scroll the page to see the real behaviour.
{% endhint %}

**Desktop height is fixed at a full screen.** There is no setting to make the section shorter on desktop — the full-screen takeover is the point of the section. What you *can* control is how much fits into that screen, using **Desktop size** on each block: a row of **Small** panels shows three at a time, a **Big** panel shows almost one.

**Scrolling the page is what moves the band.** While the section is on screen the page pins it and converts your vertical scroll into horizontal movement. Once the band reaches its end, the page carries on scrolling normally. A visitor who scrolls fast will travel through it fast — nothing is skipped.

**Mobile works completely differently.** Below 768 px the pinning is switched off and the band is an ordinary horizontal swipe at the height you set. The **Scroll down** hint is a desktop-only element and does not appear on phones.

**Block sizes adapt when there are few of them.** With exactly two panels each takes half the screen regardless of **Desktop size**, and a single panel fills the screen.

**Keep the total length sensible.** Every panel adds to how long the page is held in the section. Five or six panels is a comfortable journey; fifteen is a maze.

### Customization ideas

* Alternate **Media** and **Text** panels so the band reads as image, caption, image, caption — a gallery with wall labels.
* Use the **Number** field on text panels to number the steps of a process or the chapters of a story.
* Open with a **Big** media panel and follow with **Small** ones so the band starts slow and then speeds up.
* Put a looping video in the first panel and stills afterwards — motion at the entrance, calm inside.
* Give the last panel a button into the collection, so the story ends somewhere shoppable.

### Best practices

* Turn the **Scroll down** hint on the first time you use the section. Sideways movement is unexpected and visitors need a cue.
* Do not put the section immediately under a hero banner — give the page a normal section in between so the takeover does not start the moment someone scrolls.
* Keep text panels short; they pass by at scrolling speed.
* Test on a laptop trackpad as well as a mouse wheel — they travel at very different rates.

***

### Related

* [Banners with sticky content](/docs/avante-themes/sections/banners/banners-with-sticky-content.md)
* [Banner grid](/docs/avante-themes/sections/banners/banner-grid.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/horizontal-scrolling-banners.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.