# 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="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2Fqpuc6UKATeRxXbNEXV85%2Fslideshow.jpg?alt=media&#x26;token=42c53782-4060-4e4e-99ee-5a0fbb8ae512" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
**Editing templates will change all pages that use the same template**. [Create new templates](https://help.fluorescent.co/eclipse/pages/templates/using-templates) for different page layouts, or [show dynamic page content](https://help.fluorescent.co/eclipse/general/editing-themes/dynamic-content-with-metafields) 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="#section-colors">#section-colors</a></td><td></td></tr><tr><td align="center"><mark style="color:blue;"><strong>Section width</strong></mark></td><td><a href="../overview/section-styles#section-width">#section-width</a></td><td></td></tr><tr><td align="center"><mark style="color:blue;"><strong>Section padding</strong></mark></td><td><a href="../overview/section-styles#section-padding">#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="../overview/section-styles#overlay-colors">#overlay-colors</a></td><td><a href="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2FJmND9VbF4HtwEqV18aeb%2Foverlay-color-gradient.png?alt=media&#x26;token=953171f8-094a-43c4-97fe-2c767e76505e">overlay-color-gradient.png</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.