> For the complete documentation index, see [llms.txt](https://mpithemes.gitbook.io/unicorn-shopify-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://mpithemes.gitbook.io/unicorn-shopify-theme/dynamic-theme-sections/slideshow.md).
# Slideshow
## Slideshow
{% hint style="success" %}
This section contains the "[Slide](#slide)" block.\
**Tip:** Press **"Add block"** to use the block. Each block can be added individually and customized in different ways.
{% endhint %}
### Layout options
{% hint style="info" %}
This section's settings are automatically optimized for mobile. Activate the "[Mobile settings](#mobile-settings)" option for additional customizations on mobile.
{% endhint %}
**Image ratio**\
Use the options to adapt media to the desired size. Several available options can be selected from the drop-down. If an option includes additional settings, they appear underneath the drop-down after selecting an option:
* **"Adapt to media"**. Displays an image in its original aspect ratio.
* **"Fixed height"**. This option helps to change an image size in pixels by specifying the parameters on the **"Fixed height"** scale. The height can be adjusted between 100 and 1000 pixels.
* **"Aaspect ratio"**. Select the option to adjust a media height as a percentage using the **"Aspect ratio"** scale. The parameters can be changed from 10% to 210%\*.
\*The "Aspect ratio" option is applied to mobile by default. To modify the height specifically for mobile, use the options in the "[Mobile settings](#mobile-settings)" subsection.
**"Aspect ratio"** indicators:\
\* 100% = Square image\
\* Less than 100% = Landscape\
\* More than 100% = Portrait\
\* 16:9 = 56, 4:3 = 75, 3:2 = 67, 2:1 = 50, 1:1 = 100, 9:16 = 175, 3:4 = 133, 2:3 = 150, 1:2 = 200.
* **"Fullscreen"**. Set this option to show media in the full width of a page. The image width will match the page width set in global settings if the "Use page width limit" option is ticked under *Theme settings ->* [*Page layout*](/unicorn-shopify-theme/theme-settings/page-layout.md).
* **"Fullscreen without header"**. Using this option, the media is cropped at the top and bottom. The top spacing will be subtracted from the total height. Review your storefront to ensure the settings meet your expectations.
**Width**\
Select one of the options in the drop-down:
* **"Standard"**. Uses the default width settings.
* **"Wide"**. Displays in the full screen width.
* **"Fixed"**. This option sets the section size in pixels.
**Fixed width**\
Works with the "Fixed" option. Once the option is selected, the width can be changed manually on the scale from 450 to 2000 pixels. The margins will be set to the left and right when the "Fixed" option is used.\ **Note!** The width of the media in the section cannot exceed the page width set in the global settings. Check the parameters in *Theme settings ->* [*Page layout*](/unicorn-shopify-theme/theme-settings/page-layout.md).
For more information about the described options, please refer to the following [help page](/unicorn-shopify-theme/dynamic-theme-sections.md#content).
**Pagination style**\
Specify the slide navigation type: "Slide counter", "Numbers", or "Bullets". To deactivate the pagination, select the "Hide" option.
View how the "Slide counter" option might be displayed in a store:
**Dividing line**\
Add a divider by setting its position: "Top", "Bottom", or "Both". Select "None" to hide the divider.
**Top spacing /** **Bottom spacing**\
Decide whether to add spaces at the top and bottom of the section. Control spacing settings from 0 to 100 pixels on each scale.
### Animations
**Auto-rotate slides**\
Activates the self-running slide presentation. This option works on all screen sizes. Additional settings are available for viewing after the option is activated:
**Slide interval**\
The slide speed rotation can be adjusted in seconds on the scale from 3 to 9 seconds.
**Show Play/pause button**\
Decide whether to use the play button next to the slider pagination by checking or deactivating the checkbox. This option allows visitors to control auto-rotating slides and activate them when needed. The option works in conjunction with the **"**Auto-rotate slides" feature.
{% hint style="info" %}
The next option enables smooth image transitions with an infinite scroll effect. For easier customization, animations are disabled in the Theme Editor, on mobile devices, and on touch devices to optimize performance. The feature can be checked on the storefront after saving the changes made in the editor.
{% endhint %}
**Slide transition**\
The effect of replacing slides with one another can be controlled using the options listed in the drop-down. You can use the transition animation in different ways by selecting one of the options: "Apply to slides and text", "Apply to slides only", and "Apply to text only". The smooth animation is deactivated by using the "Disable" option.
**Slide transition speed**\
Using the slide animations, set up the speed of slide transitions from smooth to swift (from 1 to 15) on the scale.
{% hint style="warning" %}
**Note!** The **"Image behavior"** and **"Hover animation"** drop-downs contain settings for adding image animation.\
Decide on an image animation effect from **one** of the drop-down lists, as these settings may conflict.\
Use the "None" option for the unnecessary feature.
{% endhint %}
**Image behavior**\
Add dynamic motion to a static image by selecting one of the options:
* **"None"**. Disables smooth image motion.
* **"Ambient movement"**. The option adds a slight circular movement to an image.
* **"Zoom in out"**. Creates a smooth zoom-in and then zoom-out effect on the image.
* **"Zoom out in"**. Applies a zoom-out effect followed by image enlargement.
* **"Zoom random"**. Using multiple pictures in a slideshow, this option randomly zooms in or out as each image changes.
**Hover animation**\
Adds an animation inside the image container. Choose the suggested option from the list:
* **"Use theme settings"**. Select the option if there is no need to apply animation settings for the section individually. In this case, set the animation effect for the banner image in the Theme Editor's global settings using the **"Banner image"** hover animation drop-down. Read the details on the following [help page](/unicorn-shopify-theme/theme-settings/animations.md#hover-animation).
* **"None"**. Deactivates the animation.
* **"Zoom in"**. Enlarges the image on mouse hover over the banner.
* **"Zoom out"**. Decreases the image on mouse hover over the banner.
* **"Zoom in, add overlay opacity"** / **"Zoom out, add overlay opacity"**. Add the overlay opacity and zooming effect to an image using the option.
* **"Add overlay opacity"**. Enables opacity over the image.
Read more about the described options on the following [help page](/unicorn-shopify-theme/dynamic-theme-sections.md#animations).
### Mobile settings
**Enable**\
Activates mobile settings. The options below take precedence on mobile devices.
**Image ratio**\
Change the media size using one of the options in the drop-down. The corresponding settings are shown after selecting the relevant option:
* **"Same as desktop"**. Uses the settings applied for the desktop.
* **"Adapt to image"**. Displays an image in its original aspect ratio.
* **"Fixed height"**. This option adapts an image size in pixels by setting the parameters on the **"Fixed height"** scale. The height can be adjusted between 100 and 700 pixels.
* **"Aspect ratio"**. Select the option to adjust a media height as a percentage using the **"Aspect ratio"** scale. The parameters can be changed from 10% to 210%.
**"Aspect ratio"** indicators:\
\* 100% = Square media\
\* Less than 100% = Landscape\
\* More than 100% = Portrait\
\* 16:9 = 56, 4:3 = 75, 3:2 = 67, 2:1 = 50, 1:1 = 100, 9:16 = 175, 3:4 = 133, 2:3 = 150, 1:2 = 200.
\* For an ideal image aspect ratio (16:9), set the proportion to 56%.
* **"Fullscreen"**. Set this option to show media in the full width of a page. The image width will match the page width set in global settings if the "Use page width limit" option is ticked under *Theme settings ->* [*Page layout*](/unicorn-shopify-theme/theme-settings/page-layout.md).
* **"Fullscreen without header"**. Using this option, the media is cropped at the top and bottom. The top spacing is subtracted from the total height. Check how the settings work on the storefront to confirm they meet your expectations.
**Text position**\
Text can be placed "Below the image" or "Over the image". Display text over the image in the "Top", "Middle", or "Bottom". Select the desired option in the drop-down list.
### Transparent header
Allows the header to overlay the section when a transparent header is used.
**Use inverted header colors**\
Enable the option to link the color of the Header elements, such as navigation menus, Search, Compare, Account, and Cart icons, with the "[Background](/unicorn-shopify-theme/theme-settings/colors.md#background)" item under *Theme settings -> Colors -> Primary colors*. If the option is disabled, the color of the Header elements is related to the "[Base](/unicorn-shopify-theme/theme-settings/colors.md#base)" item.
***
## Slide
{% hint style="success" %}
**Tip:** To activate the slide transition effect, use multiple "Slide" blocks.\
Includes additional blocks: "[Heading](/unicorn-shopify-theme/dynamic-theme-sections/blocks/promotion.md#heading)", "[Text and page content](/unicorn-shopify-theme/dynamic-theme-sections/blocks/promotion.md#text-and-page-content)", "[Button](/unicorn-shopify-theme/dynamic-theme-sections/blocks/promotion.md#button-second-button)", and "[Two buttons](/unicorn-shopify-theme/dynamic-theme-sections/blocks/promotion.md#two-buttons)".
{% endhint %}
### Slide link
**Link**\
The banner can be linked to pages/ collections/ products. Choose the destination in the source selector.
**Open in new tab**\
When enabled, the linked page opens in a new browser tab, allowing customers to keep their current page open while viewing the linked content.
### Media
**Image**\
Press **"Select"** to upload the necessary animation for all screen sizes.
### Media overlay
{% hint style="success" %}
The settings described below only apply to desktop mode.\
**Tip:** Enable **"Show overlay"** under "[Mobile settings](#mobile-settings-1)" to apply the overlay color for mobile.
{% endhint %}
**Enable**\
Turn on the option to display the corresponding settings.
**Opacity**\
Adjust the transparency of an image color overlay using the scale, which ranges from 0 to 100%.
**Type**\
In the picker, select one of the options: "Background" or "Gradient".
**Background**\
Select the option and change the image overlay color by specifying it in the corresponding picker. By default, the color is set to transparent.
**Gradient**\
Select the option to display the related color picker. Then, apply an image overlay color using the gradient vector. Read details on how to use the option [here](/unicorn-shopify-theme/dynamic-theme-sections.md#image).
### Content area
{% hint style="success" %}
**Tip:** Use the options in the **"Mobile settings"** subsection to adjust the layout on mobile. Read details [here](#mobile-settings-1).
{% endhint %}
**Position**\
The option helps to place the text box in a desired position: "Top", "Center", or "Bottom". Each option contains settings such as "Left", "Center", and "Right". Select the option that best fits your needs using the drop-down.
**Alignment**\
Align the text on the desktop view to "Left", "Center", or "Right".
**Enable custom width**\
Use the option to adjust the text box width.
**Width**\
Adjust the width of the text box on a scale.
**Show background**\
Activate the option to view additional background settings.
**Opacity**\
Use the scale to adjust the text box background transparency from 0% to 100%:
* **0%** - invisible background
* **100%** - opaque background
**Background**\
Set the color in the color picker. By default, the color is set to transparent.
**Desktop offset**\
Adjusts the spacing around the text box on desktop devices, allowing you to control its position within the banner. Set a value from 0 to 40 pixels.
**Show desktop border**\
Displays a border around the text box on desktop devices to help it stand out from the image.
**Border width**\
Sets the thickness of the border from 0 to 20 pixels displayed around the text content area.
**Border color**\
Select the color used for the border.
**Enable desktop corner radius**\
Rounds the corners of the text content container for a softer appearance.
**Corner radius**\
Controls how rounded the text content container corners appear:
* **0 px** - square
* **20 px** - more rounded corners
### Mobile settings
**Enable**\
Activates mobile settings. The options below take precedence on mobile devices.
**Image**\
Select an image for mobile individually. Otherwise, the same image is shown on mobile view as on the desktop.\
Press **"Select"** to upload the one you need.
**Show overlay**\
Check the option to display the image color overlay. This option works with the configured settings of the image overlay. Find more details [here](#media-overlay).
**Image overlay background**\
Set the background color in the color picker. By default, the color is set to transparent.
**Text alignment**\
Align the text to "Left", "Center", or "Right".
### Mobile content area
**Set background opacity**\
Enable the option to highlight the content area using the background color. Applies to content displayed from the "[Header](/unicorn-shopify-theme/dynamic-theme-sections/blocks/header.md)" content group.\ **Note!** Uses the background color applied in the "[Content area](#text)".
**Opacity**\
Use the scale to set the transparency of the background color.
### First additional image / Second additional image
The additional image overlays the main hero image, allowing you to create layered banner designs and draw attention to specific products or promotional elements.
{% hint style="warning" %}
**Note!** Additional images appear on the desktop. These settings are not compatible with smaller screens, like mobile devices.
{% endhint %}
**Show image**\
Turn this option on to display the additional image.
**Image**\
Upload the image to overlay the hero image.
**Width**\
Adjust the width of the additional image using the scale from 0% to 70 %.
**Left**\
Use the slider to position the additional image horizontally.
**Top**\
Use the slider to position the additional image vertically.
**Shadow**\
Enable the option to add a drop shadow to the additional image, helping it stand out from the hero image.
### Scrolling text
{% hint style="warning" %}
**Note!** Use this feature to overlay a ticker on an image in desktop mode.\
It is disabled by default on mobile devices.
{% endhint %}
**Show scrolling text**\
Enable the option to display scrolling text. Additionally, this option activates other settings related to this feature.
**Text**\
Use the input field to highlight key messages, promotions, or featured content. Style your text using the formatting options at the top of the input field.
**Position**\
Arrange the ticker on the "Top", "Bottom", "Left", or "Right" side within the main image.
**Speed**\
Use the slider to adjust the running line speed in seconds from 1 to 5.
**Background opacity**\
The ticker background color can be set as solid or transparent using the scale. The parameters vary from 0 to 100.
**Background /** **Text**\
Use the paint palettes to colorize the scrolling line.
***
{% tabs %}
{% tab title="Desktop" %}
{% endtab %}
{% tab title="Mobile" %}
{% endtab %}
{% endtabs %}