> 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/reign/sections/slideshow.md).

# Slideshow

Reign's hero section — full-width image or **video** slides with eyebrow text, headings, dual buttons, and a cinematic fade-through-black transition. Used on the default homepage and the drop-mode password page.

## Section settings

### Basics

| Setting        | What it does                                                                             | Default    |
| -------------- | ---------------------------------------------------------------------------------------- | ---------- |
| Show slideshow | Hide the slideshow while slides have no media (a slide with an image/video always shows) | On         |
| Layout         | **Full width** (edge to edge) or **Page** (inside the page width)                        | Full width |
| Height         | Adapt to first image / Small / Medium / Large                                            | Medium     |

### Pagination & controls

| Setting                                                                  | What it does                                                  | Default                     |
| ------------------------------------------------------------------------ | ------------------------------------------------------------- | --------------------------- |
| Pagination position                                                      | **Overlaid on the image** or **Under the image**              | Overlay                     |
| Pagination                                                               | Dots / Counter / Numbers / **Segment bars** / Arrows only     | Segment bars                |
| Pagination alignment                                                     | Left / Center / Right                                         | Center                      |
| Overlay controls position                                                | Left / Center / Right (overlay mode)                          | Right                       |
| Overlay distance from bottom / inset from sides / space between controls | Pixel-perfect placement of the overlay arrows                 | 24 / 24 / 10                |
| Arrow and play/pause button size / corner radius / border thickness      | Button styling (44px, fully round, 1px)                       | 44 / 50 / 1                 |
| Button border color / background / icon color                            | Colors                                                        | #121212 / #ffffff / #121212 |
| Subtle shadow on buttons                                                 | Soft shadow                                                   | On                          |
| Bar indicators alignment                                                 | End (with play/pause) or Centered — for overlaid segment bars | End                         |

### Rotation & motion

| Setting                | What it does                                                                                                          | Default            |
| ---------------------- | --------------------------------------------------------------------------------------------------------------------- | ------------------ |
| Auto rotate slides     | Advance automatically                                                                                                 | On                 |
| Change slides every    | 3–9 seconds                                                                                                           | 5s                 |
| Slide transition       | **Slide (horizontal)** or **Fade through black** — fades out to black, then fades the next slide in. Needs 2+ slides. | Fade through black |
| Fade transition timing | Duration of each fade half (200–1200ms)                                                                               | 500ms              |
| Animation              | None or **Ambient movement** (slow ken-burns drift)                                                                   | None               |

### Mobile & accessibility

**Stack text below image** (off — text stays overlaid) and a **Slideshow description** for screen readers.

## Slide blocks (up to 10)

Each slide has:

### Media

* **Image** — the slide photo
* **Video** — when set, replaces the image (upload under **Content → Files**)
* **Video playback** — Autoplay (on), Mute (on — ⚠️ browsers block unmuted autoplay), Show controls (off, for chromeless heroes), Loop (on)
* **Overlay opacity** — darkens the media so text stays readable (default 30%)

### Text & buttons

* **Eyebrow** — small kicker line above the heading, with an optional **Eyebrow link**
* **Heading** + size (Small → Extra extra large; default Extra large)
* **Subheading**
* **Button** — label (blank = hidden), link, outline-style toggle
* **Second button** — optional extra CTA (outline style by default)

### Layout

* **Container** (show a text box behind content) and **Contain content to page width** (off = text stretches full-bleed)
* **Content position** — 9-point grid (default bottom-left, very editorial)
* **Content alignment** desktop + mobile
* **Color scheme** for the text container

💡 **Pro tip:** One strong slide converts better than four mediocre ones. If you use multiple slides, keep auto-rotate at 5s+, use *Fade through black*, and lead with your current drop — most visitors only see slide 1.


---

# 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/reign/sections/slideshow.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.