# Slideshow

### Section overview

The slideshow section creates a dynamic slideshow with customizable slides featuring background images or videos with text overlays, buttons, and navigation controls.

#### Common use cases

* Create engaging hero banners on homepage
* Showcase multiple product collections or promotions
* Display announcements or welcome messages with compelling visuals
* Create interactive brand stories or feature highlights

#### Usage tips

* Use high-contrast images that make text easily readable
* Keep slide content concise and action-oriented
* For better performance, optimize images before uploading
* Consider mobile users by testing how slides appear on smaller screens
* Limit the number of slides to 3-5 for optimal user experience
* Adjust auto-scroll settings based on the amount of content in each slide

### Section settings

| Setting              | Description                                                                       |
| -------------------- | --------------------------------------------------------------------------------- |
| Color scheme         | Controls the overall color theme of the slideshow section                         |
| Text color           | Determines the text color, with options for default, forced light, or forced dark |
| Border color         | Sets the color of any borders on the slideshow                                    |
| Enable gradient      | Adds a subtle gradient overlay to slides to improve text readability              |
| Border position      | Positions borders around the slideshow (none, top, bottom, or both)               |
| Vertical spacing     | Controls the height of the slideshow from extra small to extra large              |
| Vertical alignment   | Aligns slide content vertically (top, middle, or bottom)                          |
| Horizontal alignment | Aligns slide content horizontally (left, center, or right)                        |
| Visibility           | Controls visibility on different devices (all, mobile only, or desktop only)      |
| Auto-scroll delay    | Sets the time in seconds before advancing to the next slide                       |
| Enable auto-scroll   | Toggles automatic advancement through slides                                      |

### Block settings

#### Slide

Each slide block creates an individual slide in the slideshow containing background media and content.

| Setting                  | Description                                                                                  |
| ------------------------ | -------------------------------------------------------------------------------------------- |
| Desktop background image | The image displayed on desktop devices                                                       |
| Mobile background image  | An optional separate image optimized for mobile devices                                      |
| Background video         | Video file to be used as slide background                                                    |
| Show entire image        | When enabled, displays the full image (object-contain) instead of cropping it (object-cover) |
| Show video on mobile     | Toggles video visibility on mobile devices                                                   |
| Heading                  | Main headline text for the slide                                                             |
| Content                  | Rich text area for additional content on the slide                                           |
| Primary button color     | Sets the style of the primary call-to-action button                                          |
| Primary button label     | Text displayed on the primary button                                                         |
| Primary button URL       | Destination link for the primary button                                                      |
| Secondary button color   | Sets the style of the secondary call-to-action button                                        |
| Secondary button label   | Text displayed on the secondary button                                                       |
| Secondary button URL     | Destination link for the secondary button                                                    |