In this tutorial, I show you how to set up custom slider navigation buttons for the nestable slider in Bricks. Typically, the nestable slider comes with navigation arrows if you’ve activated them in the settings. However, they can sometimes get in the way of your design direction. In such cases, you might want to have the navigation buttons as separate objects. To achieve this, we need to create our own navigation buttons and use JavaScript to make them control the slider. Let’s walk through the process together.
Javascript
document.addEventListener('DOMContentLoaded', (event) => {
setTimeout(() => {
const slider = document.querySelector('.brxe-slider-nested[data-script-id="kcwwan"]');
if (!slider) return;
const splideData = JSON.parse(slider.dataset.splide || '{}');
const isNotLoopType = splideData.type !== 'loop';
const mySlider = window.bricksData?.splideInstances['kcwwan'] || false;
const myPrevBtn = document.querySelector('.custom-nav__button--prev');
const myNextBtn = document.querySelector('.custom-nav__button--next');
if (mySlider && myPrevBtn && myNextBtn) {
// Function to update button attributes
const updateButtonAttributes = () => {
if (!isNotLoopType) return; // Only update attributes if type is not 'loop'
const isFirst = mySlider.index === 0;
const isLast = mySlider.index === mySlider.Components.Controller.getEnd();
// Update previous button attributes
myPrevBtn.disabled = isFirst;
myPrevBtn.setAttribute('aria-disabled', isFirst.toString());
// Update next button attributes
myNextBtn.disabled = isLast;
myNextBtn.setAttribute('aria-disabled', isLast.toString());
};
// Add click event handlers for custom buttons
myPrevBtn.addEventListener('click', function () {
mySlider.go('-1');
});
myNextBtn.addEventListener('click', function () {
mySlider.go('+1');
});
// Update button attributes on initialization
updateButtonAttributes();
// Update button attributes when the slide changes
mySlider.on('moved', updateButtonAttributes);
}
}, 250);
});
CSS Code
.custom-slider-nav__button:hover {
background-color: var(--neutral);
}
.custom-slider-nav__button:hover svg > path {
stroke: white
}
.custom-slider-nav__button[disabled] {
opacity: 0.4;
pointer-events: none;
}