# Slider

### Section overview

The Slider section creates a carousel of customizable content blocks, each capable of displaying headings, rich text, buttons, images, and videos in a horizontal scrolling format.

#### Common use cases

* Showcasing multiple products or collections in a compact, swipeable interface
* Displaying testimonials or reviews with supporting imagery
* Creating a gallery of promotional content or announcements
* Highlighting key features or benefits of a service or product

#### Usage tips

* For best results, maintain consistent image dimensions across slides to ensure visual harmony
* Limit the number of slides to prevent overwhelming users and maintain performance
* Consider mobile users by ensuring text is legible and click targets are accessible on smaller screens
* Use the color scheme settings to create visual distinction between the slider and surrounding content

### Section settings

| Setting           | Description                                                                   |
| ----------------- | ----------------------------------------------------------------------------- |
| Heading           | The main heading displayed above the slider                                   |
| Content           | Rich text displayed alongside the main heading                                |
| Button label      | Text for the main section button                                              |
| Button URL        | Link destination for the main section button                                  |
| Top spacing       | Controls vertical padding above the section (0-300px)                         |
| Bottom spacing    | Controls vertical padding below the section (0-300px)                         |
| Color scheme      | Controls the background and text colors of the section                        |
| Border color      | Sets the color for any borders in the section                                 |
| Button color      | Sets the style and color for the main section button                          |
| Border position   | Controls where borders appear in the section                                  |
| X alignment       | Sets horizontal alignment of section content                                  |
| Arrow alignment   | Controls the positioning of navigation arrows                                 |
| Enable margin     | When enabled, adds horizontal margins to the section                          |
| Enable split      | When enabled, places the section header beside the slider instead of above it |
| Visibility        | Controls whether the section appears on mobile, desktop, or both              |
| Enable arrows     | When enabled, shows navigation arrows for the slider                          |
| Enable indicators | When enabled, shows dot indicators for slider position                        |
| Enable scrollbar  | When enabled, shows a scroll indicator for the slider                         |

### Block settings

#### Content

This block type creates an individual slide within the content slider, containing customizable content, imagery, and styling options.

* Block limit: 20

| Setting            | Description                                                              |
| ------------------ | ------------------------------------------------------------------------ |
| Heading            | The heading displayed on the slide                                       |
| Content            | Rich text content displayed on the slide                                 |
| Button label       | Text for the slide's button                                              |
| URL                | Link destination for the slide's button                                  |
| Image              | The main image displayed on the slide                                    |
| Background image   | Secondary image used as a background                                     |
| Video              | Video file to display on the slide                                       |
| Enable autoplay    | When enabled, videos play automatically                                  |
| Enable mute toggle | When enabled, shows a button to toggle video sound                       |
| Enable loop        | When enabled, videos play continuously in a loop                         |
| Minimum height     | Sets the minimum height for the slide (0-800px)                          |
| Enable padding     | When enabled, adds padding inside the slide                              |
| Color scheme       | Controls the background and text colors of the slide                     |
| Text color         | Sets the text color, with options to force light or dark                 |
| Border color       | Sets the color for any borders on the slide                              |
| Button color       | Sets the style and color for the slide's button                          |
| Enable gradient    | When enabled, adds a gradient effect to the slide background             |
| Y alignment        | Controls vertical alignment of content within the slide                  |
| X alignment        | Controls horizontal alignment of content within the slide                |
| Text position      | Determines if text appears above or below the image                      |
| Width mobile       | Controls how much horizontal space the slide occupies on mobile devices  |
| Width desktop      | Controls how much horizontal space the slide occupies on desktop devices |
| Enable max width   | When enabled, restricts the maximum width of the slide content           |