# Slideshow

<figure><img src="https://3146423938-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZQuVfmt0J7tzTvfBqG6C%2Fuploads%2FqqbLtrwXVditPIxOWpWl%2Fimage.png?alt=media&#x26;token=c99e0067-80ac-4520-a1b9-728cddc4ce75" alt="Image slide in an example slideshow with arrows on either side and text content overlaid in the middle"><figcaption><p>Example of an image slide in a slideshow</p></figcaption></figure>

### Settings

* **Layout**:
  * **Desktop/mobile height**: Choose between **Adapt**, which uses the same aspect ratio as the uploaded image, or one of three fixed sizes, **Small, Medium** and **Large**, for both desktop and mobile. This setting will apply to all blocks.
  * **Stack content**: By default, text content is positioned over the image (the **never** option). When stacked, content will be positioned below the image instead of overlaid. Choose to stack on **mobile** only or **always** to stack on bock desktop and mobile.
* **Functionality**:
  * **Enable autoplay**: This rotates the slides automatically. If you have concerns about accessibility, we do not recommend enabling this option. When enabled, a play/pause button appears. You can set styling and alignment below.
  * **Autoplay speed**: If autoplay is enabled, set the autoplay speed.
  * **Enable looping**: Unless enabled, the previous button on the first slide and the next button on the last slide are disabled. Enabling this option allows the smooth cycling through the slides.
  * **Animation style**: Choose between a fade or slide animation when users navigate between slides.
* **Navigation**:
  * **Button position**: Choose **overlay** to always have the arrows visible on top of the slide, choose **hover** to turn the user's cursor into a previous/next button or choose **below** to display them underneath the banner.
  * **Button style**: Choose between primary, secondary or text for the button (when **overlay** position is selected) and the play/pause button (when **autoplay** is enabled).
  * **Counter position**: Choose to display the counter **over** or **below** the slide content.
  * **Counter style**: Choose between a simple counter or a progress bar.
* **Autoplay button**:
  * **Button alignment**: Choose top left, center or top right
  * **Button display**: **Always** display the play button or only display it **on hover/focus**.

{% hint style="info" %}
Can't find the setting you're looking for?  The following settings are explained in detail in our [shared settings guide.](https://docs.ultramarinastudios.com/common-settings)

* Color scheme
* Borders
  {% endhint %}

### Blocks

Two block types are available:

#### Image banner

* **Media**: Choose a **desktop image** and, optionally, a **mobile image**
* **Layout:**
  * **Media frame:** Can be used to add a border or frame effect to your image. The background color of this frame inherits from the current color scheme.
  * **Media content padding**: When the text content is overlaid, this setting allows you to choose its spacing from the edge of media. This setting may therefore only be noticeable when the content is aligned to the top/bottom or left/right. **Default** aligns the content to the page width where possible.
* **Text content**:
  * **Horizontal and vertical alignment:** Text can be aligned to different **horizontal** and **vertical alignments,** depending on what works best for your image.
* **Colors**:
  * **Enable overlay**: Enable this to improve contrast between the media and the content&#x20;
  * **Overlay color**: Choose the overlay color and adjust the gradient to your liking

<figure><img src="https://3146423938-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZQuVfmt0J7tzTvfBqG6C%2Fuploads%2FnWyhRvHhMHoyGLejSDgC%2Fslideshow-composition.webp?alt=media&#x26;token=3d211b14-0385-472d-ac3e-2c0c24954fa6" alt=""><figcaption><p>A shoppable banner slide within the slideshow section</p></figcaption></figure>

#### Shoppable banner

This block allows you to highlight key products along with a piece of visual media, either an image or video.&#x20;

* **Media**: Choose a **desktop image** and, optionally, a **mobile image**
* **Layout:**
  * **Media frame:** Can be used to add a border or frame effect to your image. The background color of this frame inherits from the current color scheme.
  * **Media content padding**: When the text content is overlaid, this setting allows you to choose its spacing from the edge of media. This setting may therefore only be noticeable when the content is aligned to the top/bottom or left/right. **Default** aligns the content to the page width where possible.
* **Products:** These horizontal/vertical settings determine the positioning of the mini products relative to the media (unless content is stacked, in which case it will always be below the media).
* **Colors:**
  * **Enable overlay:** Use this option to improve readability of the text over all screen sizes. Applying a semi-transparent overlay is a great way to ensure both the image and text are visible.
  * **Overlay color**: Choose a linear gradient to apply when the overlay is enabled.

{% hint style="info" %}
Can't find the setting you're looking for?  The following settings are explained in detail in [common settings](https://docs.ultramarinastudios.com/common-settings):

* Container width
* Color/Color scheme transition
  {% endhint %}