# Slider

<figure><img src="https://3723856256-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGnixyIfIYFWroNtVmZo6%2Fuploads%2Fgit-blob-c9ae7614d4d7d8c0de64d55a9fd119ad825571e2%2Fimage.png?alt=media" 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](https://help.brickspacelab.com/slab/content/blocks/layout/slider/slider-item)
* [Slider products](https://help.brickspacelab.com/slab/content/blocks/all-pagination/products/slider-products)
* [Slider articles](https://help.brickspacelab.com/slab/content/blocks/all-pagination/articles/slider-articles)
* [Slider collections](https://help.brickspacelab.com/slab/content/blocks/all-pagination/collections/slider-collections)
* [Slider gallery](https://help.brickspacelab.com/slab/content/blocks/all-pagination/gallery/slider-gallery)
* [Slider recommendations](https://help.brickspacelab.com/slab/content/blocks/all-pagination/products/slider-product-recommendations)
* [Slider recent](https://help.brickspacelab.com/slab/content/blocks/all-pagination/products/slider-recently-viewed)

## 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> |