# Slider

### Section overview

The Content Slider section provides a customizable horizontal slider of content cards that can be used to display various types of information and media.

#### Common use cases

* Showcasing featured products with images and descriptions
* Displaying promotional content or announcements
* Highlighting key features or benefits of products/services
* Creating image galleries with supporting text content

#### Usage tips

* Use consistent image sizes across slider blocks for a polished appearance
* Keep text content concise within each slide to maintain readability
* Consider mobile users by setting appropriate mobile widths for each block
* Use color schemes that complement your overall store design
* Test slider navigation on both desktop and mobile to ensure good user experience

### Section settings

| Setting              | Description                                                                            |
| -------------------- | -------------------------------------------------------------------------------------- |
| Heading              | Main section heading displayed above the slider                                        |
| Content              | Rich text content displayed below the section heading                                  |
| Button label         | Text to display on the section's call-to-action button                                 |
| Button URL           | Destination URL for the section's call-to-action button                                |
| Top spacing          | Amount of space above the section (0-300px)                                            |
| Bottom spacing       | Amount of space below the section (0-300px)                                            |
| Color scheme         | Background and text color combination for the section                                  |
| Border color         | Color of the section's border                                                          |
| Button color         | Style and color variant for the section's button                                       |
| Border position      | Position of borders around the section (none, top, bottom, or both)                    |
| Horizontal alignment | Controls the alignment of section content (left, center, right)                        |
| Visibility           | Controls section visibility on different device types (all, mobile only, desktop only) |

### Block settings

#### Content

Content blocks are the individual slides within the slider. Each block can contain images, text, and a call-to-action button.

Limit: 20 blocks per slider

| Setting               | Description                                                              |
| --------------------- | ------------------------------------------------------------------------ |
| Heading               | Title text for the content block                                         |
| Content               | Rich text content displayed in the block                                 |
| Image                 | Featured image displayed in the block                                    |
| Background image      | Image used as the block's background                                     |
| Background video      | Video used as the block's background                                     |
| Enable video autoplay | Automatically plays the background video when visible                    |
| Enable mute button    | Shows a button to toggle video sound on/off                              |
| Enable video loop     | Continuously loops the background video                                  |
| Button label          | Text to display on the block's call-to-action button                     |
| Button URL            | Destination URL for the block's call-to-action button                    |
| Top spacing           | Amount of space above the block content (0-300px)                        |
| Bottom spacing        | Amount of space below the block content (0-300px)                        |
| Enable padding        | Adds padding around the block content                                    |
| Color scheme          | Background and text color combination for the block                      |
| Border color          | Color of the block's border                                              |
| Text color            | Controls text color rendering (default, force light, force dark)         |
| Button color          | Style and color variant for the block's button                           |
| Enable gradient       | Adds a subtle gradient overlay to the block                              |
| Vertical alignment    | Controls the vertical alignment of block content (top, middle, bottom)   |
| Horizontal alignment  | Controls the horizontal alignment of block content (left, center, right) |
| Desktop width         | Width of the block on desktop devices (1-12 grid units)                  |
| Mobile width          | Width of the block on mobile devices (1-12 grid units)                   |