# Slider

<figure><img src="/files/qO0vOmsqWd02hfrFDRmV" alt=""><figcaption></figcaption></figure>

## Overview

A flexible slider/carousel container component that provides smooth scrolling functionality for child content blocks. Features auto-scroll capabilities, navigation arrows, progress indicators, and responsive behavior. All JavaScript functionality is contained within Alpine.js x-data attributes for efficient performance.

## Common use cases

* Create image carousels or product sliders
* Display featured content in a scrollable horizontal layout
* Use auto-scroll for automatic content rotation
* Add navigation controls for user interaction
* Show progress indicators to display slide position
* Enable scroll animations for engaging content reveals

## Compatible blocks

The following blocks can be nested within this block:

* [Slider item](/slab/content/blocks/layout/slider/slider-item.md)
* [Slider products](/slab/content/blocks/all-pagination/products/slider-products.md)
* [Slider articles](/slab/content/blocks/all-pagination/articles/slider-articles.md)
* [Slider collections](/slab/content/blocks/all-pagination/collections/slider-collections.md)
* [Slider gallery](/slab/content/blocks/all-pagination/gallery/slider-gallery.md)
* [Slider recommendations](/slab/content/blocks/all-pagination/products/slider-product-recommendations.md)
* [Slider recent](/slab/content/blocks/all-pagination/products/slider-recently-viewed.md)

## Block settings

### General

| Setting                | Description                                                                                  | Options                   |
| ---------------------- | -------------------------------------------------------------------------------------------- | ------------------------- |
| Show advanced settings | Reveals 6 advanced options including enable instant transition, enable auto scroll, and more | Checkbox (default: false) |

### Content

| Setting                   | Description                                        | Options                                                                                                                                                                                      |
| ------------------------- | -------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Show arrows               | Displays navigation arrows for the slider          | Checkbox (default: true)                                                                                                                                                                     |
| Show indicators           | Displays progress indicators (dots or numbers)     | Checkbox (default: true)                                                                                                                                                                     |
| Show controls on hover    | Shows controls only when hovering over the slider  | <p>Checkbox (default: false)<br><br>Visible when show arrows or show indicators is true</p>                                                                                                  |
| Show scrollbar            | Displays a scrollbar for the slider                | Checkbox (default: false)                                                                                                                                                                    |
| Show progress bar         | Displays a progress bar at the top of the slider   | <p>Checkbox (default: false)<br><br>Visible when enable auto scroll is true</p>                                                                                                              |
| Enable instant transition | Removes smooth scrolling for instant slide changes | <p>Checkbox (default: false)<br><br>Visible when <strong>Show advanced settings</strong> is on</p>                                                                                           |
| Enable auto scroll        | Automatically scrolls through slides               | <p>Checkbox (default: false)<br><br>Visible when <strong>Show advanced settings</strong> is on</p>                                                                                           |
| Auto scroll delay         | Time delay between auto-scroll transitions         | <p>0 - 20 s (default: 0)<br><br>Visible when enable auto scroll is true</p><p><br><br>Visible when <strong>Show advanced settings</strong> is on and <strong>Enable auto scroll</strong></p> |

### Spacing

| Setting                   | Description                               | Options                                                                      |
| ------------------------- | ----------------------------------------- | ---------------------------------------------------------------------------- |
| Top spacing               | Padding space at the top of the slider    | 0 - 300 px (default: 0)                                                      |
| Bottom spacing            | Padding space at the bottom of the slider | 0 - 300 px (default: 0)                                                      |
| Enable horizontal padding | Adds horizontal padding around the slider | Checkbox (default: false)                                                    |
| Gap size                  | Controls spacing between slider items     | <p>• None<br>• Default (default)<br>• XS<br>• SM<br>• MD<br>• LG<br>• XL</p> |

### Color

| Setting         | Description                               | Options                                                                                                                                                                                    |
| --------------- | ----------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Color scheme    | Controls the background and text colors   | <p>• Body<br>• Neutral<br>• Accent 1<br>• Accent 2<br>• Accent 3<br>• Shade 1<br>• Shade 2<br>• Shade 3<br>• Primary<br>• Secondary<br>• Tertiary<br>• Blur<br>• Transparent (default)</p> |
| Color border    | Controls the border color                 | <p>• Body<br>• Subtle (default)<br>• Strong<br>• Primary<br>• Secondary<br>• Tertiary<br>• None<br><br>Visible when border position is not blank</p>                                       |
| Color arrow     | Controls the color of navigation arrows   | <p>• Primary<br>• Secondary<br>• Tertiary<br>• Neutral<br>• Plain<br>• Outline<br>• Inverted outline<br>• Blur<br>• Link<br>• Inverted link<br><br>Visible when show arrows is true</p>    |
| Color indicator | Controls the color of progress indicators | <p>• Primary<br>• Secondary<br>• Tertiary<br>• Neutral<br>• Plain<br>• Outline<br>• Inverted outline<br>• Blur<br>• Transparent<br><br>Visible when show indicators is true</p>            |

### Style

| Setting          | Description                                       | Options                                                                                                            |
| ---------------- | ------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------ |
| Button size      | Controls the size of navigation arrow buttons     | <p>• Extra small<br>• Small (default)<br>• Standard<br>• Large<br><br>Visible when show arrows is true</p>         |
| Border position  | Controls where borders appear                     | <p>• None (default)<br>• Top<br>• Bottom<br>• Left<br>• Right<br>• Top and bottom<br>• Left and right<br>• All</p> |
| Indicator radius | Controls the border radius of progress indicators | <p>• None<br>• Default (default)<br>• Sm<br>• Md<br>• Lg<br>• Xl<br>• 2xl<br>• Full</p>                            |

### Layout

| Setting              | Description                                               | Options                                                                                                              |
| -------------------- | --------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- |
| Vertical alignment   | Controls vertical alignment of slider items               | <p>• Top (default)<br>• Middle<br>• Bottom</p>                                                                       |
| Control alignment    | Controls horizontal alignment of navigation controls      | <p>• Left<br>• Center<br>• Right (default)<br><br>Visible when show arrows or show indicators is true</p>            |
| Control placement    | Controls vertical placement of navigation controls        | <p>• Top (default)<br>• Middle<br>• Bottom<br>• Under<br><br>Visible when show arrows or show indicators is true</p> |
| Enable scroll margin | Applies margin based on theme settings for scroll padding | Checkbox (default: false)                                                                                            |

### Display

| Setting          | Description                          | Options                                                                                                                                                                                                                                          |
| ---------------- | ------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Visibility       | Controls when the block is visible   | <p>• All (default)<br>• Mobile only<br>• Desktop only</p><p><br><br>Visible when <strong>Show advanced settings</strong> is on</p>                                                                                                               |
| Load animation   | Animation when the block first loads | <p>• None (default)<br>• Fade<br>• Fade up<br>• Offset fade<br>• Offset fade up</p><p><br><br>Visible when <strong>Show advanced settings</strong> is on and <strong>Scroll animation</strong> is <strong>None</strong></p>                      |
| Scroll animation | Adds scroll-triggered animations     | <p>• None (default)<br>• Fade<br>• Slide up<br>• Slide down<br>• Slide left<br>• Slide right<br>• Zoom</p><p><br><br>Visible when <strong>Show advanced settings</strong> is on and <strong>Load animation</strong> is <strong>None</strong></p> |


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.brickspacelab.com/slab/content/blocks/layout/slider.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.