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):

2. Add attribute "bt-data-slider" to this slider and as a value add some name, e.g. "slider-1"

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"

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.

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"

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

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:

// 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.