# Slideshow

### Section overview

The Slideshow section allows you to create a responsive banner slideshow with multiple slides, each containing background images or videos with text overlays.

#### Common Use Cases

* Hero banners on homepage to showcase promotions or collections
* Product announcements with strong visual impact
* Seasonal campaigns or featured content rotations
* Brand storytelling through a sequence of banner slides

#### Usage Tips

* For best results, use high-quality images with good contrast to ensure text overlays remain readable
* Keep text content concise and impactful to maintain visual hierarchy
* Consider mobile users by keeping essential information visible on smaller screens
* Use auto-scroll feature judiciously - slower scroll speeds (5+ seconds) work best for readability

### Section Settings

| Setting               | Description                                                                     |
| --------------------- | ------------------------------------------------------------------------------- |
| Color border          | Choose border color style (subtle or strong)                                    |
| Y spacing             | Control the vertical height of the slideshow (extra small to extra large)       |
| Border position       | Set where borders appear (none, top, bottom, or both)                           |
| Enable header overlap | Allow the slideshow to overlap with the header for a seamless look              |
| Enable margin         | Add horizontal margin to the slideshow content                                  |
| Enable border margin  | Add padding inside the borders                                                  |
| Enable max width      | Limit the text content width for better readability                             |
| Arrow alignment       | Position navigation arrows horizontally (left, center, or right)                |
| Arrow placement       | Position navigation arrows vertically (top, bottom, or under the slideshow)     |
| Visibility            | Control where the slideshow appears (all devices, mobile only, or desktop only) |
| Auto scroll delay     | Set time between automatic slide transitions (0-20 seconds)                     |

### Block Settings

#### Content Block

The Content block allows you to create individual slides within the slideshow, each with its own visual background, text content, and buttons.

Block limit: 4

| Setting                   | Description                                                                   |
| ------------------------- | ----------------------------------------------------------------------------- |
| Heading                   | Main title text for the slide                                                 |
| Content                   | Rich text area for descriptive content                                        |
| URL                       | Link for the entire slide (optional)                                          |
| Desktop background image  | Background image optimized for desktop view                                   |
| Mobile background image   | Background image optimized for mobile view (falls back to desktop if not set) |
| Video background          | Background video for the slide                                                |
| Show entire image         | Toggle between containing the full image or covering the entire area          |
| Show video on mobile      | Enable/disable video playback on mobile devices                               |
| Button label              | Text for the primary call-to-action button                                    |
| Button URL                | Link destination for the primary button                                       |
| Button color              | Style option for the primary button appearance                                |
| Secondary button label    | Text for the additional call-to-action button                                 |
| Secondary button URL      | Link destination for the secondary button                                     |
| Secondary button color    | Style option for the secondary button appearance                              |
| Color scheme              | Background color theme for the slide                                          |
| Text color                | Force light or dark text color, or use theme default                          |
| Enable gradient           | Add a subtle gradient overlay to improve text visibility                      |
| Enable background overlay | Add a background behind text content for better contrast                      |
| Vertical alignment        | Position content vertically (top, middle, or bottom)                          |
| Horizontal alignment      | Position content horizontally (left, center, or right)                        |