# Slideshow

### Section overview

The Slideshow section allows for the creation of an interactive banner carousel with customizable content slides, supporting both image and video backgrounds with text overlays and navigation controls.

#### Common use cases

* Showcasing multiple promotional banners or announcements in a single space
* Highlighting featured products or collections with eye-catching visuals
* Creating an engaging homepage hero section with multiple messages
* Displaying seasonal campaigns or promotional offers in rotation

#### Usage tips

* Use high-quality images with good contrast to ensure text remains readable
* Keep slide content concise and focused on a single call-to-action per slide
* Consider mobile users by ensuring text remains legible on smaller screens
* Limit the number of slides to 3-4 to maintain user engagement
* When using auto-scroll, set a reasonable delay (5-7 seconds) to allow users to read content
* Test the slideshow on both desktop and mobile to ensure proper responsiveness

### Section settings

| Setting              | Description                                                                                                 |
| -------------------- | ----------------------------------------------------------------------------------------------------------- |
| Auto scroll delay    | Sets the time in seconds between automatic slide transitions. Set to 0 to disable auto-scrolling.           |
| Y spacing            | Controls the vertical height of the slideshow. Options range from extra small to extra large.               |
| Color border         | Sets the color of the border. Choose between subtle or strong.                                              |
| Border position      | Determines where borders appear. Options include none, top, bottom, or top and bottom.                      |
| Enable margin        | When enabled, adds horizontal margin to the slideshow.                                                      |
| Enable border margin | When enabled, adds rounded corners and padding to the slideshow.                                            |
| Enable max width     | When enabled, limits the width of the text content.                                                         |
| Visibility           | Controls on which devices the slideshow appears. Options include all devices, mobile only, or desktop only. |

### Block settings

#### Content

This block type allows for the creation of individual slides within the slideshow, each with customizable content, background media, and styling options.

Block limit: 4

| Setting                   | Description                                                                                                                                              |
| ------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Heading                   | The main title displayed on the slide.                                                                                                                   |
| Content                   | Rich text content displayed below the heading.                                                                                                           |
| Url                       | Makes the entire slide clickable, linking to the specified URL.                                                                                          |
| Image background desktop  | Background image displayed on desktop devices.                                                                                                           |
| Image background mobile   | Background image displayed on mobile devices. If not set, the desktop image will be used.                                                                |
| Video background          | Background video that plays behind the slide content.                                                                                                    |
| Show entire image         | When enabled, shows the entire image without cropping.                                                                                                   |
| Show video on mobile      | When enabled, plays the background video on mobile devices.                                                                                              |
| Button label              | Text displayed on the primary call-to-action button.                                                                                                     |
| Button url                | URL the primary button links to when clicked.                                                                                                            |
| Color button              | Style option for the primary button. Options include primary, secondary, tertiary, neutral, plain, outline, inverted outline, link, and inverted link.   |
| Secondary button label    | Text displayed on the secondary call-to-action button.                                                                                                   |
| Secondary button url      | URL the secondary button links to when clicked.                                                                                                          |
| Secondary color button    | Style option for the secondary button. Options include primary, secondary, tertiary, neutral, plain, outline, inverted outline, link, and inverted link. |
| Color scheme              | Sets the background and text color theme for the slide.                                                                                                  |
| Color text                | Forces text color to be light or dark, overriding the color scheme.                                                                                      |
| Enable gradient           | When enabled, adds a gradient overlay to the background.                                                                                                 |
| Enable background overlay | When enabled, adds a background to the text for better readability.                                                                                      |
| Y alignment               | Controls the vertical alignment of content within the slide. Options include top, middle, or bottom.                                                     |
| X alignment               | Controls the horizontal alignment of content within the slide. Options include left, center, or right.                                                   |