# Slider

### Section overview

The Slider section creates a customizable horizontal slider that can showcase multiple content blocks in a limited space. Each slide can contain a heading, content, button, and images or videos with various layout and styling options.

#### Common Use Cases

* Showcasing multiple promotional messages or announcements in a compact, interactive format
* Displaying featured products, collections, or content in a visually engaging way
* Creating a visual storytelling experience with sequential content blocks
* Highlighting multiple brand values or features with supporting imagery

#### Usage Tips

* For best results, use consistent image sizes across all slides to maintain visual harmony
* Limit the number of slides to 3-5 for optimal user experience
* Keep content concise within each slide to avoid overwhelming visitors
* Consider mobile responsiveness when configuring content - test how your slides appear on smaller screens
* Use the auto-scroll feature sparingly as it may create accessibility issues or frustrate users
* Ensure sufficient contrast between text and background colors for readability

### Section Settings

| Setting              | Description                                                    |
| -------------------- | -------------------------------------------------------------- |
| Heading              | The main heading for the slider section                        |
| Content              | The descriptive text for the slider section                    |
| Button label         | Text to display on the button                                  |
| Button url           | URL the button links to when clicked                           |
| Top spacing          | Controls the padding above the section (0-300px)               |
| Bottom spacing       | Controls the padding below the section (0-300px)               |
| Color scheme         | Background color theme for the section                         |
| Custom color         | Custom background color (when color scheme is set to "Custom") |
| Text color           | Force light or dark text colors                                |
| Border color         | Color of the section border                                    |
| Button color         | Style of the main section button                               |
| Enable color fade    | When enabled, changes the page background color on scroll      |
| Border position      | Position of the border on the section                          |
| X alignment          | Horizontal alignment of section content                        |
| Arrow alignment      | Horizontal alignment of slider navigation arrows               |
| Arrow placement      | Vertical position of slider navigation arrows                  |
| Enable margin        | Adds horizontal margin to the section                          |
| Enable scroll margin | Adds margin to the scrollable area                             |
| Enable split         | Displays header content beside the slider instead of above it  |
| Enable split heading | Splits the heading across multiple lines                       |
| Visibility           | Controls visibility on mobile and desktop devices              |
| Auto scroll delay    | Time between automatic slide transitions (in seconds)          |
| Enable arrows        | Shows navigation arrows for the slider                         |
| Enable indicators    | Shows indicator dots for the slider                            |
| Enable scrollbar     | Shows a scrollbar for the slider                               |

### Block Settings

#### Content Block

This block type allows you to create individual slides for the content slider with customizable content, media, styling, and layout options. You can add up to 20 content blocks to your slider.

| Setting                  | Description                                             |
| ------------------------ | ------------------------------------------------------- |
| Heading                  | The main heading for this slide                         |
| Content                  | The descriptive text for this slide                     |
| Button label             | Text to display on the button                           |
| URL                      | Destination URL when the button or block is clicked     |
| Image                    | Main image to display in the slide                      |
| Show image as background | Displays the image as a background for the entire slide |
| Video                    | Video file to display in the slide                      |
| Enable autoplay          | Automatically starts playing the video when visible     |
| Enable mute toggle       | Shows a button to toggle video sound on/off             |
| Enable loop              | Continuously loops the video playback                   |
| Minimum height           | Sets the minimum height of the slide (0-800px)          |
| Enable padding           | Adds padding inside the slide content                   |
| Color scheme             | Background color theme for this slide                   |
| Border color             | Color of the slide border                               |
| Text color               | Force light or dark text colors for this slide          |
| Button color             | Style of the slide's button                             |
| Enable gradient          | Adds a gradient overlay to the slide                    |
| Text position            | Places text above or below the image                    |
| Y alignment              | Vertical alignment of slide content                     |
| X alignment              | Horizontal alignment of slide content                   |
| Width mobile             | Width of the slide on mobile devices (in 12ths)         |
| Width desktop            | Width of the slide on desktop devices (in 12ths)        |
| Enable max width         | Constrains the maximum width of the slide content       |