# Slideshow

The **Slideshow** displays auto-rotating slides with images and autoplay videos (without sound). You can fine-tune how your images look, all slide headings and colors, and add a mobile-specific image for the best experience across all devices.

<figure><img src="/files/YeWK2PThP3vjdIUV06ih" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
**Editing templates will change all pages that use the same template**. [Create new templates](/eclipse/pages/templates/using-templates.md) for different page layouts, or [show dynamic page content](/eclipse/general/editing-themes/dynamic-content-with-metafields.md) in the same template.
{% endhint %}

## Set up section

***

In the editor side panel, click **(+) Add section** and select **Slideshow**. Click and hold the drag handles **`⋮⋮`** to re-order sections.

### Section styles

***

Click the section to edit general **section styles** for colors and spacing, available in all sections:

<table data-view="cards"><thead><tr><th align="center"></th><th data-hidden data-card-target data-type="content-ref"></th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td align="center"><mark style="color:blue;"><strong>Section colors</strong></mark></td><td><a href="/pages/uhLDR6NP1GbWwCml0jVd#section-colors">/pages/uhLDR6NP1GbWwCml0jVd#section-colors</a></td><td></td></tr><tr><td align="center"><mark style="color:blue;"><strong>Section width</strong></mark></td><td><a href="/pages/3wq6hFMr3k1BDOHIgjqZ#section-width">/pages/3wq6hFMr3k1BDOHIgjqZ#section-width</a></td><td></td></tr><tr><td align="center"><mark style="color:blue;"><strong>Section padding</strong></mark></td><td><a href="/pages/3wq6hFMr3k1BDOHIgjqZ#section-padding">/pages/3wq6hFMr3k1BDOHIgjqZ#section-padding</a></td><td></td></tr></tbody></table>

## Set up slideshow

***

### Autoplay slides

By default, multiple slides will auto-rotate every 6 seconds. You can change the **time between slides** or **disable autoplay** to let visitors rotate through slides with the pagination buttons.

&#x20;

`Click Slideshow section to find settings`

<table><thead><tr><th width="190">Setting</th><th width="400">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Enable autoplay</mark></td><td>When checked, slides will auto-rotate.</td><td></td></tr><tr><td><mark style="color:blue;">Time between slides</mark></td><td>Set the number of seconds to show each slide before auto-rotating.</td><td><strong>4 - 20</strong> <em><mark style="background-color:yellow;">Default</mark></em><mark style="background-color:yellow;">: 6</mark></td></tr></tbody></table>

### Choose height

Choose a **fixed height** to make the slideshow the exact same height on all screen sizes. Choose a **relative height** to have slides adapt their height to a certain percentage of the screen height.

&#x20;

`Click Slideshow section to find settings`

<table><thead><tr><th width="190">Setting</th><th width="400">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Desktop height</mark></td><td>Set the section height to a fixed height (in pixels) or relative height (as a percentage of the screen height).</td><td><strong>Fixed height</strong><br>250 - 750px<br><strong>Relative height</strong><br>50 - 100%<br><em><mark style="background-color:yellow;">Default</mark></em><mark style="background-color:yellow;">: 650px</mark></td></tr><tr><td><mark style="color:blue;">Mobile height</mark></td><td>Set the section height to a fixed height (in pixels) or relative height (as a percentage of the screen height).</td><td><strong>Fixed height</strong><br>150 - 750px<br><strong>Relative height</strong><br>50 - 100%<br><em><mark style="background-color:yellow;">Default</mark></em><mark style="background-color:yellow;">: 450px</mark></td></tr></tbody></table>

### Customize pagination

Change the **alignment** and **colors** of the navigation buttons for moving to the next or previous slides.

&#x20;

`Click Slideshow section to find settings`

<table><thead><tr><th width="190">Setting</th><th width="400">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Alignment</mark></td><td>Position the slide navigation buttons to the left, center, or right.</td><td><strong>Left</strong><br><strong>Center</strong><br><strong>Right</strong></td></tr><tr><td><mark style="color:blue;">Background</mark></td><td>Change the color behind the slide pagination buttons.</td><td></td></tr><tr><td><mark style="color:blue;">Foreground</mark></td><td>Change the color of the slide pagination buttons.</td><td></td></tr><tr><td><mark style="color:blue;">Background opacity</mark></td><td>Use the slider to adjust the transparency of the background. Set the opacity to 0% to hide the background. If set to 100%, the background will be a solid color.</td><td><strong>0 - 100</strong> <em><mark style="background-color:yellow;">Default</mark></em><mark style="background-color:yellow;">: 50</mark></td></tr></tbody></table>

### Choose slide animation

The slideshow uses animations for revealing the the text and slides as they rotate.

&#x20;

`Click Slideshow section to find settings`

<table><thead><tr><th width="190">Setting</th><th width="400">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Enable text animation</mark></td><td>When enabled, headings and text slide up and fade into view upon loading.</td><td></td></tr><tr><td><mark style="color:blue;">Slide animation</mark></td><td>Change the animation style of how the image loads. The image can gradually fade into view or be revealed by an iris swipe, which appears as a growing circle. Set to None to disable animations.</td><td><strong>None</strong><br><strong>Fade</strong><br><strong>Iris wipe</strong></td></tr></tbody></table>

## Add image or video slide

***

Use the **Image slide** block to display an image as the slide background. The **Video slide** displays an autoplay video (without sound) as the slide background. Add headings, text, and an optional button.

After uploading your media, you can select the **focal point** of your video and add a **color overlay**.

<table data-card-size="large" data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-type="content-ref"></th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td><mark style="color:blue;"><strong>Using color overlays</strong></mark></td><td>Learn how to change overlay colors and use gradients.</td><td><a href="/pages/3wq6hFMr3k1BDOHIgjqZ#overlay-colors">/pages/3wq6hFMr3k1BDOHIgjqZ#overlay-colors</a></td><td><a href="/files/r6qvEikOKVMq5Hv30JkJ">/files/r6qvEikOKVMq5Hv30JkJ</a></td></tr></tbody></table>

{% tabs %}
{% tab title="Video requirements" %}
For **autoplay videos**, make sure your video files meet the following requirements:

<table data-header-hidden><thead><tr><th width="180"></th><th></th></tr></thead><tbody><tr><td><strong>Video file type</strong></td><td><code>.mp4</code> or <code>.mov</code><br><br><em>Embedded YouTube or Vimeo videos are not supported</em>.</td></tr><tr><td><strong>Video length</strong></td><td>&#x3C; 20 seconds (Recommended)</td></tr><tr><td><strong>Video size</strong></td><td>&#x3C; 10MB (Recommended)</td></tr></tbody></table>
{% endtab %}
{% endtabs %}

&#x20;

`Click Video slide block to find settings`

<table><thead><tr><th width="190">Setting</th><th width="400">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Shopify video</mark></td><td>Select or upload a video that autoplays (without sound).</td><td></td></tr><tr><td><mark style="color:blue;">Mobile Shopify video</mark></td><td>Select or upload an alternate video to show on mobile devices.</td><td></td></tr><tr><td><mark style="color:blue;">Video focal point</mark></td><td>Specify the main focus of the video. The focal point will remain centered and within frame to avoid unwanted cropping.</td><td><strong>Center</strong> <em><mark style="background-color:yellow;">Default</mark></em><br><strong>Top</strong><br><strong>Bottom</strong><br><strong>Left</strong><br><strong>Right</strong></td></tr><tr><td><mark style="color:blue;">Show overlay</mark></td><td>Add a color tint to the image.</td><td></td></tr><tr><td><mark style="color:blue;">Overlay opacity</mark></td><td>Use the slider to change the transparency of the overlay. Set the opacity to 0% to turn off the overlay. Set to 100% to display a solid color (instead of the image).</td><td><strong>0-100</strong> <em><mark style="background-color:yellow;">Default</mark></em><mark style="background-color:yellow;">: 20</mark></td></tr></tbody></table>

&#x20;

`Click Image slide block to find settings`

<table><thead><tr><th width="190">Setting</th><th width="400">Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Image</mark></td><td>Select or upload an image to display as the background of the banner.</td></tr><tr><td><mark style="color:blue;">Mobile image</mark></td><td>Select or upload an alternate image to display on mobile devices.</td></tr></tbody></table>

## Set up slide content

***

After adding an image or video, add **headings**, **text**, and **buttons**. You can adjust the **text size** and change the **alignment** of the slide content.

&#x20;

`Click Slide block to find settings`

<table><thead><tr><th width="190">Setting</th><th width="341">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Content width</mark></td><td>Use the sliders to set the maximum width (in pixels) of the section content.</td><td><strong>200 - 1000 px</strong> <em><mark style="background-color:yellow;">Default</mark></em><mark style="background-color:yellow;">: 500</mark></td></tr><tr><td><mark style="color:blue;">Text position</mark></td><td>Set the position of the text content for desktop screens.</td><td><strong>Top / Middle / Bottom</strong><br><strong>Left / Center / Right</strong></td></tr><tr><td><mark style="color:blue;">Mobile text position</mark></td><td>Set the position of the text content for mobile screens.</td><td><strong>Top / Middle / Bottom</strong><br><strong>Left / Center / Right</strong></td></tr><tr><td><mark style="color:blue;">Overline</mark></td><td>The small text above the heading.</td><td><mark style="background-color:yellow;">Default: "Overline"</mark></td></tr><tr><td><mark style="color:blue;">Heading</mark></td><td>The title of the slide.</td><td><mark style="background-color:yellow;">Default: "Slide Heading"</mark></td></tr><tr><td><mark style="color:blue;">Heading size</mark></td><td>Change the size of the heading text from small to large.</td><td><strong>1-8</strong> <em><mark style="background-color:yellow;">Default</mark></em><mark style="background-color:yellow;">: 8</mark></td></tr><tr><td><mark style="color:blue;">Heading tag</mark></td><td>Change the heading tag to modify the page structure. Use H2 to indicate important topics, and use H3-H6 for related topics. Learn how to <a href="https://github.com/fluorescent/kb-horizon/blob/main/general/editing-themes/h1-heading-tags/README.md#replacing-default-h1-headings">replace default H1 headings</a>.<br><br>This option doesn't change the heading's appearance.</td><td><strong>H1 - H6</strong></td></tr><tr><td><mark style="color:blue;">Text</mark></td><td>Add multiple lines of rich text. Use the buttons to make the text bold or italicized, or to add a link.</td><td><mark style="background-color:yellow;">Default: "Tell your brand's story through images"</mark></td></tr><tr><td><mark style="color:blue;">Text size</mark></td><td>Adjust the size of the section text from small to large.</td><td><strong>1-8</strong> <em><mark style="background-color:yellow;">Default</mark></em><mark style="background-color:yellow;">: 3</mark></td></tr><tr><td><mark style="color:blue;">Button link</mark></td><td>The URL that you want the button to link to.</td><td></td></tr><tr><td><mark style="color:blue;">Button label</mark></td><td>The text that displays on the button.</td><td><mark style="background-color:yellow;">Default: Button</mark></td></tr><tr><td><mark style="color:blue;">Button style</mark></td><td>Change the style of the button.</td><td><strong>Solid</strong> <em><mark style="background-color:yellow;">Default</mark></em><br><strong>Outline</strong><br><strong>Text</strong></td></tr></tbody></table>

&#x20;

## Section colors

***

The section uses two color schemes. The first color scheme applies a section **background** color, and the **overlay** color scheme applies text, button, and overlay tint colors.

### Change background color

***

The section background is visible when the section has **top and bottom** **padding** or when the section width is **page width** or **full width padded**.

In the section settings, select a **color scheme** (at the top of the settings panel) to apply its background color. You can edit the color scheme in your theme settings.


---

# Agent Instructions: 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:

```
GET https://help.fluorescent.co/eclipse/sections/slideshow.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.