Make one Swiper slider control another

Not WordPress specific this one, but I love Swiper and occasionally you may wish to use 2x Swiper sliders together and have them controlled in a way that one controls the other.   This could be handy if you’re making a timeline and want some dates to control a carousel, or if you want a slider of thumbnails to control a main image.  There could be lots of uses for this, but here’s how you do it.

// slider 1
var swiperone = new Swiper('.swiper-one', {
slidesPerView: 1,
lazy: true,
loop: true,
spaceBetween: 10,
// Navigation arrows
navigation: {
nextEl: '.swiper-one-button-next',
prevEl: '.swiper-one-button-prev',
},
});
// slider 2
var swipertwo = new Swiper('.swiper-two', {
slidesPerView: 1,
lazy: true,
loop: true,
spaceBetween: 10,
});
// here's where you link the two sliders above
swiperone.controller.control = swipertwo;
swipertwo.controller.control = swiperone;

Useful post? Share it

Leave a Reply

Your email address will not be published. Required fields are marked *