Swiper: Thumbs not work when the parameter "centeredSlides" is set to false

[Miralo]

Based on the "Thumbnails" demo everything works well on the slider, but when I try to change the parameter "centeredSlides" to false the thumbs seems to be disabled (if you click on one of them nothing will happen)

Sorry for my bad English,
Thanks

[nolimits4web]

That is by design and how controller works. Duplicate of #1138, and look solution in #1138 or in similar closed issues

[Miralo]

Thanks, but that's not the solution it's only a workaround. i'll never use your plugin again.

[nolimits4web]

Ahah, no problems, don't use it

[renatodeleao]

Dramatic @Miralo.
For me Swiper stills one of the best sliders plugin.

I came across the same issue in a simple use case, I use one slider in freeMode as navigation for other slider, in order to mimic a common mobile pattern (nav-tabs), but the centered slides cause a design problem that really annoyed me.

I've achieved the effect by using just one slider and toggling visibility classes on my "tabs" based on the current index of the clicked slide.

It could be also be achieved with two sliders, by manually toggling a different "active class" based on your onClick and onSlideChangeEnd events.
A simple codepen example based on your two-way gallery thumbs demo.

I understand that this is not how swiper works as you've said in #1138, but as it is, this two way control is only usable for gallery sliders... which is limiting... but once again, understandable.

Either way, thanks for Swiper! :shipit:

[sebastian-palma]

Great answer @renatodeleao, thanks so much!

[wouterhendriks]

Thanks @renatodeleao, works like a charm! (although I'd recommend using onSlideChangeStart instead of onSlideChangeEnd, makes it a bit smoother)

[synonymouse]

or just use transform: initial!important; on thumb slides

[nelsonamaya82]

@renatodeleao Thank you very much, you saved my life. Another improvement to your code should be to use onTap instead of onClick to avoid the 300ms delay.

[renatodeleao]

@nelsonamaya82 You're right, I guess my 2015 demo needs a little revamp :P

(speaking of that... damnn time flies! Glad it helped!)

[benjamminf]

For anyone interested in another solution:

I ran into this realisation when trying to synchronise two Swiper galleries. I assumed it'd work the same as the Slick carousel in that any two carousels with the same number of slides could automatically control each other.

I really needed this functionality so I hacked the following together:

function getCurrentIndex(swiper) {
    // Apparently the `realIndex` property might be a string?
    return swiper.realIndex|0;
}

function getTotalSlides(swiper) {
    // Looped carousels include leading/lagging slides which buffs the length of this array
    return swiper.slides.length - (swiper.params.loop ? 2 : 0);
}

function changeSlide(swiper, index) {
    const currentIndex = getCurrentIndex(swiper);
    const total = getTotalSlides(swiper);

    // Only change the slide if the new index is different to the current
    // This is important if two carousels are controlling each other, as without this check the program will go into an infinite loop and overflow the stack
    if (currentIndex !== index) {
        // If the carousel loops around, then we want to ensure it truly does loop - simply using the `slideTo` method doesn't actually account for looping
        // The idea is to check if the new index is directly before or after the current, and if so, use the `slidePrev`/`slideNext` methods that *do* account for looping
        if (swiper.params.loop) {
            if ((index === 0 && currentIndex === total - 1) || index === currentIndex + 1) {
                swiper.slideNext();
            } else if ((index === total - 1 && currentIndex === 0) || index === currentIndex - 1) {
                swiper.slidePrev();
            } else {
                // Need to buffer the index to account for the leading/lagging slides
                swiper.slideTo(index + 1);
            }
        } else {
            swiper.slideTo(index);
        }
    }
}

function controlSwiper(controller, target) {
    // Listens for a `transitionStart` event, as none of the other slide changing events seemed to trigger at all
    controller.on('transitionStart', function() {
        const index = getCurrentIndex(controller);
        changeSlide(target, index);
    });
}

Then if I wanted two Swiper galleries to control each other, I'd just write:

controlSwiper(swiperA, swiperB);
controlSwiper(swiperB, swiperA);