I wanted to control my sliders with self-made buttons. The instructions from the Bricks Academy were very helpful in getting the first slider to work. Unfortunately, the instructions do not work if more than one slider is used on the page. For some reason, only the top buttons are recognised and then control both sliders … that’s strange.
The adapted code:
<script>
document.addEventListener('DOMContentLoaded', (event) => {
// Give some times for Bricks to init the sliders
setTimeout(() => {
// Please replace rrbqsp to your Slider element ID !!NOT CSS ID!!
const mySlider = window.bricksData?.splideInstances['xnkdeo'] || false
// Please replace the button classes to suit your scenario
const myPrevBtn = document.querySelector('.my-prev')
const myNextBtn = document.querySelector('.my-next')
if (mySlider && myPrevBtn && myNextBtn) {
// Add click event handlers for your custom buttons
myPrevBtn.addEventListener('click', function () {
mySlider.go('-1') // go() function by SplideJS
})
myNextBtn.addEventListener('click', function () {
mySlider.go('+1') // go() function by SplideJS
})
}
}, 250)
})
</script>
<script>
document.addEventListener('DOMContentLoaded', (event) => {
// Give some times for Bricks to init the sliders
setTimeout(() => {
// Please replace rrbqsp to your Slider element ID !!NOT CSS ID!!
const mySlider = window.bricksData?.splideInstances['pkrxhk'] || false
// Please replace the button classes to suit your scenario
const myPrevBtn = document.querySelector('.my-prev')
const myNextBtn = document.querySelector('.my-next')
if (mySlider && myPrevBtn && myNextBtn) {
// Add click event handlers for your custom buttons
myPrevBtn.addEventListener('click', function () {
mySlider.go('-1') // go() function by SplideJS
})
myNextBtn.addEventListener('click', function () {
mySlider.go('+1') // go() function by SplideJS
})
}
}, 250)
})
</script>
I’m not a JS expert either, but something like this should work (maybe there are better solutions).
You must use different classes for the prev and next links for the respective sliders.
<script>
document.addEventListener('DOMContentLoaded', (event) => {
// Give some times for Bricks to init the sliders
setTimeout(() => {
// Define slider and button classes
const sliderBtnPairs = [
{ sliderId: 'lghqly', prevBtnClass: '.my-prev1', nextBtnClass: '.my-next1' },
{ sliderId: 'wcfhhn', prevBtnClass: '.my-prev2', nextBtnClass: '.my-next2' }
];
// Iterate over slider-button pairs
sliderBtnPairs.forEach(pair => {
// Get slider and button elements
const mySlider = window.bricksData?.splideInstances[pair.sliderId] || false;
const myPrevBtn = document.querySelector(pair.prevBtnClass);
const myNextBtn = document.querySelector(pair.nextBtnClass);
// Add event listeners if slider and buttons exist
if (mySlider && myPrevBtn && myNextBtn) {
myPrevBtn.addEventListener('click', () => mySlider.go('-1'));
myNextBtn.addEventListener('click', () => mySlider.go('+1'));
}
});
}, 250);
});
</script>
Hello Timmse
I have slightly different issue with custom arrow:
I use Nestable Slider for Real Estate projects, as 1 project/ slide, using QUERY Loop
Each project will have (nested) Sliders for project’s images, etc…(Sliders Child)
My Custom arrows use postID dynamic data (of the query) to identify each Sliders child. I put the custom code inside the loop.
4. ISSUE: The custom arrows dont work at all (for Slider child). Although, when I move them out of Parent Slider, it works fine. I guess, there’s sth wrong with my addEventListener → it listen to the Parent Slider, not Child.
