> For the complete documentation index, see [llms.txt](https://sitesbyseth.gitbook.io/sitesbyseth-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://sitesbyseth.gitbook.io/sitesbyseth-docs/skeleton/sections/image-autoscroll.md).

# Image autoscroll

A slow, continuously scrolling carousel of cards — images you upload, products from a collection, or collection covers. Hovering a card reveals its title over a dark overlay, with an optional 3D tilt.

**Where to use it:** the homepage, as a lookbook strip, a "shop by category" band, or an ambient product reel between other sections.

## Settings

* **Heading** — optional title above the carousel.

### Content

* **Mode** — where the cards come from:
  * **Images** (default) — you build each card yourself with Image blocks below. Full control, best for lookbooks.
  * **Products** — cards are pulled automatically from a collection; your store name shows as the eyebrow and the product name as the heading.
  * **Collections** — cards show the collections you pick; the collection name is the heading.
* **Collection** — Products mode: the collection to pull from.
* **Products to show** (3–12, default 8) — Products mode only.
* **Show price** (off by default) — Products mode only; adds the price to each card.
* **Collections** (list, up to 12) — Collections mode: pick which collections to show.

### Scrolling

* **Auto-scroll** (on by default) — the strip drifts continuously. When off, arrows appear on both sides for manual scrolling.
* **Scroll duration** (10–90s, default 40) — time for one full loop. Higher is slower and calmer.
* **Scroll direction** — **Left** (default) or **Right**.
* **Pause on hover** (on by default) — the strip stops while the cursor is over it so people can click.
* **3D lift on hover** (on by default) — cards tilt subtly toward the cursor.
* **Card width** (200–520 px, default 320).
* **Image aspect ratio** — **Square (1:1)**, **Portrait (4:5)** (default), **Tall (2:3)**, or **Landscape (4:3)**.
* **Gap between images** (0–48 px, default 16) — set 0 for a seamless filmstrip.

### Hover text

* **Text color** (default `#FFFFFF`) — the eyebrow/heading shown on hover.
* **Overlay opacity** (0–90%, default 55) — how dark the card gets on hover.
* **Heading size** (80–180%, default 110) — scale of the hover heading.

### Section style

* **Top padding** / **Bottom padding** (0–120 px, default 64), **Background color**, **Text color** — standard section overrides.

## Blocks

### Image (up to 12 — Images mode only)

* **Image** — portrait around 800 × 1000 px looks great at the default ratio.
* **Eyebrow** — small label (default "Collection").
* **Heading** — the card title (default "Image title").
* **Link** — where clicking the card goes.

💡 **Pro tip:** Products mode is the zero-maintenance option — point it at your "new arrivals" collection and the strip updates itself with every drop. Use Images mode when you want art direction: mix campaign shots with category tiles, and always set links so the pretty strip actually sells.


---

# 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 dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://sitesbyseth.gitbook.io/sitesbyseth-docs/skeleton/sections/image-autoscroll.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.