# Custom slider controls

Bricks Nestable slider is powerful but to have custom arrows, progressbar or synchronized sliders you need to write code. Layouts that have sliders with these custom controls come with a custom JS code. Everything is set via attributes.

### Custom arrows

Previous button must have class .bt-slidernav-prev and Next button .bt-slidernav-next

To connect them to the slider, follow these steps:

1. Add class of your slider to the array of slider classes (in the code): ![](/files/b2xdouLa23dfPiQul9m9)
2. Add attribute "bt-data-slider" to this slider and as a value add some name, e.g. "slider-1"![](/files/Z05MqW0v9PPQHnxI1aAO)
3. Add attribute "bt-data-slider" to previous and next buttons, both will have same value that is equal to the value of your slider "slider-1"

### Progress bar

Similar to arrows, define your slider class in the codeblock and asign attribute to it. Then:

1. Create a Div which will act as a progress bar wrapper. This has usually some light-grey background.
2. Add a Div inside this wrapper. This is act as a progress bar. Set its width to 0px height to 4px, background color (brand or dark) and set a transition to it.
3. Connect this Div with slider via attribute "bt-data-slider" and value that match the value of the slider. Additionally, add an attribute "bt-data-progress-type" with value "progress"![](/files/FR6ISYSFFXI5rNCVE9bB)

{% hint style="info" %}
If you have sliders with autoplay, you can change value of "bt-data-progress-type" to "animated" and the progress bar will animate from 0% to 100% of width with duration equaling to autoplay speed.
{% endhint %}

### Fractions

If you want to display fractions with current and max. number of slides like this: 1/5

1. Create a Div and connect it to slider via attribute "bt-data-slider"
2. Add another attribute "bt-data-fractions" with value "true"

### Synchronized sliders

We are usually synchronizing 2 sliders. Main and thumb sliders. Main slider has usually 1 slider per view and thumbs slider has more slides per view.

1. Start with adding both slider classes to slider array in the codeblock
2. Add attribute "bt-data-slider" to both sliders. Each with unique value. E.g. main-slider and thumb-slider
3. On the main slider, add another attribute "bt-data-sync" and use "main" as a value
4. On the thumbs slider, add another attribute "bt-data-sync" and use value of the main slider: "main-slider"

{% hint style="info" %}
If you want to make thumbs slider clickable to navigate the synced slider, use option isNavigation: true (ref: <https://splidejs.com/guides/options/#isnavigation>). Must be added via custom options for the thumbs slider ![](/files/hvbRWpQf68ulqiM67MxZ)
{% endhint %}

Bricks Boilerplate uses synchronized sliders inside a product quick view element which is basically a Bricks popup. To make it work with the popup, you need to listen to popup event. In the codeblock, uncomment the last part:

```php
// Listen for AJAX popup event to initialize sliders
  document.addEventListener('bricks/ajax/popup/loaded', (event) => {
    const popupId = event.detail.popupId;
    // If the popup ID matches a specific value (you can customize the ID check)
    if (popupId === 1867) { // Customize this ID check as needed
      setTimeout(initializeSliders, 250); // Delay for popup content to be fully available
    }
  });
```

and change popupId to ID of popup that you want to target.


---

# 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://docs.brickstheme.com/advanced/custom-slider-controls.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.