Hey everyone,
is it possible to sync two sliders?
Yes, you can sync two sliders. It’s not natively built in, but with a little tlc you can make it happen. Take a look at this thread where they talk about just that.
1 Like
Wow that was easy! Thanks a lot for this. Worked right away. insanity
2 Likes
Do you happen to know how I can manipulate the dots from the pagination? Would like to build a navigation from the titles
I’m not totally sure about changing the text of the navigation. (as far as the exact code to use goes anyways)
I’d start by looking at this section of the SplideJS documenation:
You could also try looking at it from a different angle.
Using your newly acquired slider sync skills, you could make another slider with only the titles. and just set the “slides to show” to the number of titles you have.
1 Like
Ahh that’s exactly the tip I needed… I totally forgot that I can simply increase the number of slides that are displayed… Now I can implement what I want - I hope!
Thank you
haha no problem. Sometimes we stare at a problem for so long that we forget that there are multiple ways to accomplish the same task. It usually takes an outsider to make us realize that. 
1 Like
hmm but that still doesn’t work… 
The titles are then not clickable. They should be clickable so that the primary slider changes them.
Yeah, I’ll keep trying but I don’t know what else to try right now. Maybe someone else will chime in.
Nevertheless, thank you for your tips! The slider sync works, so I’m super happy!
Oh cool! How did you set it to true? Did you have to set the options to custom?
https://www.lean-business.ch/wp/team/
This is what my thumbnail slider looks like.
{
"type":"slide",
"focus":"left",
"direction":"ltr",
"keyboard":"global",
"drag":false,
"start":0,
"perPage":"10",
"perMove":1,
"speed":400,
"interval":3000,
"autoHeight":false,
"autoplay":false,
"pauseOnHover":false,
"pauseOnFocus":false,
"arrows":false,
"isNavigation": true,
"pagination":false
}
And this is my main-slider
{
"type":"fade",
"rewind":true,
"pagination":false,
"keyboard":"global",
"height":"100vh"
}
I have no idea what exactly I need from it, I will remove or add that at a later date, but everything works with it.
1 Like
Yeah, that’s what I figured. Still cool though. Good job! 
1 Like
With your help! Thanks buddy
Hey,
Something I noticed today is that the sync seems to drop when you resize the browser window. You might have to set a trigger to sync after each resize.
It’s probably related to breakpoints being able to have different slider settings.
I was wondering about that too. the slider sometimes stopped working and I didn’t know why. thanks for that!
Unfortunately, I don’t know enough about JavaScript, so I have no idea what the solution looks like here
That’s okay, It’s not super hard. Try something like this:
var timer;
window.addEventListener("resize", (function() {
clearTimeout(timer);
timer = setTimeout(sliderSyncFunction, 300);
}));
1 Like
@cmstew is right. Remember to sync your sliders after resize event. And has to be higher than 250ms for the timeout.
Just bare in mind currently the resize event on window will reinitiate the swiper or splide instances. (1.5.3 still the same)
It’s been discussed here for your reference SOLVED: Nested slider error in slide mode
2 Likes
@itchycode @cmstew Is it correct that way? it still doesn’t work… Thank you for your great support
<script>
function timeOutFunction() {
timeout = setTimeout(syncSliders, 1000);
}
function syncSliders() {
const mainCarouselId = 'primary',
thumbnailCarouselId = 'secondary',
main = bricksData.splideInstances[mainCarouselId],
thumbnail = bricksData.splideInstances[thumbnailCarouselId]
// console.log('timeout started')
if( main && thumbnail) {
main.sync(thumbnail)
}
// console.log('timeout ended')
// console.log(main, thumbnail )
clearTimeout(timeout);
}
var timer;
window.addEventListener("resize", (function() {
clearTimeout(timer);
timer = setTimeout(sliderSyncFunction, 300);
}));
document.addEventListener( 'DOMContentLoaded', timeOutFunction)
</script>