Swiper: Thumbs Gallery With Two-way Control / multiple instances

Created on 8 Feb 2016 · 4Comments · Source: nolimits4web/swiper

My code looks like this and it works perfect on multiple instances except cant get two way control to work ( thumbs to control slides and vice versa):

$(".gallery-top").each(function(index, element){
var $this = $(this);
var galleryTop = new Swiper(this, {
nextButton: $(this).find('.swiper-button-next')[0],
prevButton: $(this).find('.swiper-button-prev')[0],
spaceBetween: 10,
loop:true,
loopedSlides: 5,
preloadImages: false,
lazyLoading: true
});
});

$(".gallery-thumbs").each(function(index, element){
var $this = $(this);
var galleryThumbs = new Swiper(this, {
spaceBetween: 10,
slidesPerView: 4,
touchRatio: 0.2,
loop:true,
loopedSlides: 5,
slideToClickedSlide: true,
preloadImages: false,
lazyLoading: true
});
});

galleryTop.params.control = galleryThumbs;
galleryThumbs.params.control = galleryTop;

Do you have any idea how to get two-way control working on this one

Source

lxmarinkovic

👍1

Most helpful comment

Maybe something like this:

var galleryTop = [];
var galleryThumbs = [];

$(".gallery-top").each(function(index, element){
    var $this = $(this);
    galleryTop.push(new Swiper(this, {...}));
});

$(".gallery-thumbs").each(function(index, element){
    var $this = $(this);
    galleryThumbs.push(new Swiper(this, {...}));
});

for (var i = 0; i < galleryTop.length; i++) {
  galleryTop[i].params.control = galleryThumbs[i];
  galleryThumbs[i].params.control = galleryTop[i];
}

nolimits4web on 8 Feb 2016

👍3

All 4 comments

Maybe something like this:

var galleryTop = [];
var galleryThumbs = [];

$(".gallery-top").each(function(index, element){
    var $this = $(this);
    galleryTop.push(new Swiper(this, {...}));
});

$(".gallery-thumbs").each(function(index, element){
    var $this = $(this);
    galleryThumbs.push(new Swiper(this, {...}));
});

for (var i = 0; i < galleryTop.length; i++) {
  galleryTop[i].params.control = galleryThumbs[i];
  galleryThumbs[i].params.control = galleryTop[i];
}

nolimits4web on 8 Feb 2016

👍3

Just perfect, thank you so much!

lxmarinkovic on 8 Feb 2016

    $(".images").each(function(index, el) {
        var gtop = $(".thumbSlider", this);
        var gtmb = $(".galleryThumbs", this);
        var galleryTop = new Swiper(gtop, {});
        var galleryThumbs = new Swiper(gtmb, {
            spaceBetween: 8,
            centeredSlides: true,
            slidesPerView: 'auto',
            touchRatio: 0.2,
            slideToClickedSlide: true
        });

        galleryTop.params.control = galleryThumbs;
        galleryThumbs.params.control = galleryTop;
    });