> For the complete documentation index, see [llms.txt](https://ursus-ecom.gitbook.io/arctos-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ursus-ecom.gitbook.io/arctos-theme/blocks/media/slideshow.md).

# Slideshow

Build a responsive image or video slideshow with flexible slide content, transitions, autoplay, pagination, and carousel controls.

The **Slideshow** block displays a sequence of image or video slides for promotions, featured collections, campaigns, announcements, or brand storytelling. Each slide can contain its own media, layout, color scheme, and reusable content blocks.

### 1. What you can do

* Add and reorder Slide items
* Use an image, uploaded video, YouTube video, or Vimeo video on each slide
* Create full-size, landscape, portrait, or square slides
* Choose standard or carousel-style slide presentation
* Add transitions, pagination, autoplay, animation, and infinite looping
* Build each slide with headings, text, buttons, images, videos, countdowns, testimonials, and other supported blocks
* Set separate slideshow and slide layouts for mobile

### 2. Understanding the Slideshow structure

The Slideshow contains **Slide item** child blocks. Add one Slide item for each screen customers can move through.

```
Slideshow
`-- Slide item
    `-- Inner content blocks
```

Each Slide item has its own background media setting and can contain reusable content blocks.

### 3. How to add a Slideshow

{% stepper %}
{% step %}
**Open a compatible section**

In the Theme Editor (Customize), open a compatible section or container.
{% endstep %}

{% step %}
**Add a slideshow block**

Click **Add block**, then select **Slideshow**.
{% endstep %}

{% step %}
**Replace the media**

Open each **Slide item** and replace its image or video.
{% endstep %}

{% step %}
**Edit slide content**

Edit, add, remove, or reorder the content inside each slide.
{% endstep %}

{% step %}
**Manage slide items**

Add, duplicate, remove, or reorder Slide items as needed.
{% endstep %}

{% step %}
**Configure the slideshow settings**

Set the layout and carousel behavior.
{% endstep %}

{% step %}
**Preview the result**

Check how it looks on desktop and mobile.
{% endstep %}

{% step %}
**Save your changes**

Click **Save**.
{% endstep %}
{% endstepper %}

### 4. Slideshow settings

<details>

<summary>Size and proportions</summary>

Control the overall frame used by every Slide item.

<table><thead><tr><th width="116.38671875">Setting</th><th width="159.59375">Options</th><th width="387.984375">What it does</th></tr></thead><tbody><tr><td><strong>Full size</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Expands the Slideshow to a full-size presentation. Turn it off to choose an orientation, aspect ratio, and width.</td></tr><tr><td><strong>Orientation</strong></td><td><ul><li>Portrait</li><li>Landscape</li><li>Square</li></ul></td><td><ul><li><strong>Square</strong> crops to equal width and height.</li></ul><p>Choosing <strong>Portrait</strong> or <strong>Landscape</strong> reveals a secondary <strong>Ratio</strong> setting:</p><ul><li><strong>Portrait</strong>: 9:16, 4:5, 3:4, or 5:7.</li><li><strong>Landscape</strong>: 16:9, 4:3, 3:2, or 21:9.</li></ul></td></tr><tr><td><strong>Width</strong></td><td><ul><li>Fill</li><li>Custom</li></ul></td><td><ul><li><strong>Fill</strong> stretches the Slideshow to fill the available width.</li><li><strong>Custom</strong> lets you set an exact width in pixels or as a percentage.</li></ul><p>Container width is always full width on mobile.</p></td></tr><tr><td><strong>Unit</strong></td><td><ul><li>Percent</li><li>Pixels</li></ul></td><td>Chooses the measurement used for a custom width.</td></tr><tr><td><strong>Custom width</strong></td><td><ul><li>0-100%</li><li>0-2000px</li></ul></td><td>Sets the precise Slideshow width for the selected unit.</td></tr></tbody></table>

</details>

<details>

<summary>Carousel</summary>

Choose how customers move between slides and how the Slideshow communicates progress.

<table data-search="false"><thead><tr><th width="120.109375">Setting</th><th width="165.10546875">Options</th><th width="388.96484375">What it does</th></tr></thead><tbody><tr><td><strong>Enable hint</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Reveals part of neighboring slides to hint that customers can continue through the carousel.</td></tr><tr><td><strong>Gap</strong></td><td><ul><li>Default</li><li>0–32px</li><li>Custom</li></ul></td><td><em>Sets the spacing between slides when <strong>Enable hint</strong> is on.</em></td></tr><tr><td><strong>Transition effect</strong></td><td><ul><li>Slide</li><li>Fade</li><li>Scale</li><li>Vertical</li><li>Wipe</li></ul></td><td><em>Controls the visual change between slides when <strong>Enable hint</strong> is off.</em></td></tr><tr><td><strong>Pagination</strong></td><td><ul><li>None</li><li>Dots</li><li>Bars</li></ul></td><td>Shows no progress indicator, compact dots, or progress bars.</td></tr><tr><td><strong>Show pagination background</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Adds a contrasting background behind the pagination dots. <em>Available when <strong>Pagination</strong> is <strong>Dots</strong>.</em></td></tr><tr><td><strong>Navigation buttons</strong></td><td><ul><li>All devices</li><li>Desktop only</li><li>Mobile only</li><li>None</li></ul></td><td>Controls whether previous and next buttons appear. Customers can always drag or swipe between slides.</td></tr><tr><td><strong>Enable auto play</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Advances through slides automatically.</td></tr><tr><td><strong>Change slides every</strong></td><td>1–5 seconds</td><td>Sets how long each slide remains visible when autoplay is enabled.</td></tr><tr><td><strong>Animate effect</strong></td><td><ul><li>None</li><li>Zoom in</li><li>Zoom out</li><li>Move to left</li><li>Move to right</li><li>Move to top</li><li>Move to bottom</li></ul></td><td>Adds movement to slide media while autoplay is enabled.</td></tr><tr><td><strong>Enable infinite loop</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Continues from the last slide back to the first instead of stopping at the end.</td></tr></tbody></table>

</details>

<details>

<summary>Style</summary>

Control the Slideshow's shared colors and corner shape.

<table><thead><tr><th width="96.03515625">Setting</th><th width="146.515625">Options</th><th width="421.59375">What it does</th></tr></thead><tbody><tr><td><strong>Inherit color scheme</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td><ul><li>Turning this <strong>On</strong> matches the Slideshow's colors to the section or block it sits in.</li><li>Turning it <strong>Off</strong> lets you pick a unique color scheme to make the Slideshow stand out.</li></ul></td></tr><tr><td><strong>Color scheme</strong></td><td>Color scheme picker</td><td>Use the picker to select a color scheme set in <a href="/arctos-theme/theme-settings/colors.md">Theme settings > Colors</a>. <em>Only available when <strong>Inherit color scheme</strong> is off.</em></td></tr><tr><td><strong>Corner radius</strong></td><td><ul><li>Main corner</li><li>Small</li><li>Extra small</li><li>None</li><li>Custom</li></ul></td><td><ul><li><strong>Main corner</strong> matches the global corner radius set in your theme.</li><li><strong>Small</strong> and <strong>Extra small</strong> inherit from the <a href="/pages/MtcWsJuspkVnqjnkw5Ur#id-1.-global-style-main-corner">main corner</a> value and scale it down proportionally for a subtler effect.</li><li><strong>None</strong> removes rounding entirely for a sharp, full-bleed look.</li><li><strong>Custom</strong> lets you set a precise value to match a specific design.</li></ul></td></tr><tr><td><strong>Custom corner</strong></td><td>0–100px</td><td><em>Sets the precise radius when <strong>Corner radius</strong> is <strong>Custom</strong>.</em></td></tr></tbody></table>

</details>

<details>

<summary>Spacing</summary>

Use padding for space inside the Slideshow and margin for separation from neighboring blocks.

For both **Padding** and **Margin**, you can:

* turn custom spacing on or off;
* set top, bottom, left, and right values from 0–200px;
* turn on **Custom on mobile** and set separate mobile values from 0–100px.

</details>

### 5. Slide item

Each **Slide item** controls one slide's background media, content arrangement, color scheme, and inner spacing.

<details>

<summary>Slide media</summary>

Choose an image or video background and apply optional visual treatments.

<table><thead><tr><th width="95.13671875">Setting</th><th width="132.390625">Options</th><th width="436.328125">What it does</th></tr></thead><tbody><tr><td><strong>Media type</strong></td><td><ul><li>Image</li><li>Video</li></ul></td><td>Chooses the background media for the Slide item.</td></tr><tr><td><strong>Source</strong></td><td><ul><li>Uploaded</li><li>External URL</li></ul></td><td>Uses a video uploaded to Shopify or a YouTube or Vimeo URL. <em>Available when <strong>Media type</strong> is <strong>Video</strong>.</em></td></tr><tr><td><strong>Show different media on mobile</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Turn on to display an alternate image or video file specifically on mobile devices.</td></tr><tr><td><strong>Overlay</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Adds a transparent color or gradient over the slide media to improve contrast and text readability.</td></tr><tr><td><strong>Enable parallax effect</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Creates a depth effect by moving the background media at a different speed while customers scroll.</td></tr><tr><td><strong>Filter</strong></td><td><ul><li>Normal</li><li>Grayscale</li><li>Vintage</li><li>Warm</li><li>High contrast</li><li>Fade</li></ul></td><td>Applies a ready-made color treatment to the slide media.</td></tr></tbody></table>

For detailed media, overlay, filter, and parallax guidance, see [Image](/arctos-theme/blocks/basic/image.md) and [Video](/arctos-theme/blocks/basic/video.md).

</details>

<details>

<summary>Inner content layout</summary>

Arrange the blocks placed inside this Slide item. [Learn how inner content layout settings work](https://ursus-ecom.gitbook.io/arctos-theme/blocks/media/pages/ABvGsQq7dgOOxcwgztbs#id-3.2.-inner-content-layout).

<table data-search="false"><thead><tr><th width="105.42578125">Setting</th><th width="135.8046875">Options</th><th width="422.65234375">What it does</th></tr></thead><tbody><tr><td><strong>Direction</strong></td><td><ul><li>Vertical</li><li>Horizontal</li></ul></td><td><ul><li><strong>Vertical</strong> stacks inner content from top to bottom.</li><li><strong>Horizontal</strong> arranges inner content side by side.</li></ul></td></tr><tr><td><strong>Alignment</strong></td><td><ul><li>Left</li><li>Center</li><li>Right</li><li>Space between</li></ul></td><td><em>Controls horizontal distribution when <strong>Direction</strong> is <strong>Horizontal</strong>.</em></td></tr><tr><td><strong>Position</strong></td><td><ul><li>Top</li><li>Middle</li><li>Bottom</li></ul></td><td><em>Aligns content vertically when <strong>Direction</strong> is <strong>Horizontal</strong>.</em></td></tr><tr><td><strong>Align baseline</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Aligns the bottom line of differently sized text blocks. <em>Available when horizontal <strong>Position</strong> is <strong>Bottom</strong>.</em></td></tr><tr><td><strong>Alignment</strong></td><td><ul><li>Left</li><li>Center</li><li>Right</li></ul></td><td><em>Controls horizontal placement when <strong>Direction</strong> is <strong>Vertical</strong>.</em></td></tr><tr><td><strong>Position</strong></td><td><ul><li>Top</li><li>Middle</li><li>Bottom</li><li>Space between</li></ul></td><td><em>Controls vertical distribution when <strong>Direction</strong> is <strong>Vertical</strong>.</em></td></tr><tr><td><strong>Gap</strong></td><td><ul><li>Default</li><li>0–32px</li><li>Custom</li></ul></td><td>Sets the spacing between blocks inside the Slide item.</td></tr><tr><td><strong>Custom gap</strong></td><td>0–200px</td><td><em>Sets a precise gap when <strong>Gap</strong> is <strong>Custom</strong>.</em></td></tr><tr><td><strong>Custom on mobile</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Turn on to set separate direction, alignment, position, baseline, and gap controls specifically for mobile screens.</td></tr></tbody></table>

</details>

<details>

<summary>Slide colors and spacing</summary>

Give an individual slide its own color treatment and inner spacing.

<table><thead><tr><th width="98.0703125">Setting</th><th width="100.37890625">Options</th><th width="465.0859375">What it does</th></tr></thead><tbody><tr><td><strong>Inherit color scheme</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td><ul><li>Turning this <strong>On</strong> matches the Slide item's colors to the Slideshow.</li><li>Turning it <strong>Off</strong> lets you pick a unique color scheme for this slide.</li></ul></td></tr><tr><td><strong>Color scheme</strong></td><td>Color scheme picker</td><td>Use the picker to select a color scheme set in <a href="/arctos-theme/theme-settings/colors.md">Theme settings > Colors</a>. <em>Only available when <strong>Inherit color scheme</strong> is off.</em></td></tr><tr><td><strong>Padding</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Adds space inside the Slide item, between its edge and the slide content.</td></tr><tr><td><strong>Margin</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Adds space around the Slide item to separate it from neighboring blocks.</td></tr></tbody></table>

</details>