swiper thumb gallery problem without use centeredSlides

[ginkosen]

swiper thumb gallery problem without use centeredSlides .

When galleryThumbs swiper slide , the galleryTop doesn't swiper to the right slide

Code Preview here

[rustamgaliev]

I have the same problem

[ghost]

Me too. When I switch off centeredSlides, it becomes unable to show some slides, though in thumbnails swiper displays them perfectly.

[AntonShumin]

I came here for the exact same issue. The last n (however visible) elements will not respond to any actions. with centeredSlides: false

Also, looping .gallery-thumbs causes all kinds of issues

[WebKieth]

I also have the same. But I have a nice idea how to solve the bug. Swiper has a nice API method .slideTo and into one of the last project i needed to code anchors to other slides. You can syncronize your slides without top.params.control = thumbs thumbs.params.control = top. jQuery helps you - you need to indexing each slide for top and thumb, and do callback, when you click on slide. Callback with galleryTop.slideTo(galThumbIndex).
Or something like this. I will try it when will have some time

[Triloworld]

I have the same bug there. centeredSlides is bugged. There is more issue about problems with it.

[amiut]

I have the same issue, it's so annoying

[shrpne]

Here is PR which maybe can fix this issue: #1915

Also related issues with workarounds: #1138 #1209

[Grawl]

Have the same issue.

My example: https://codepen.io/Grawl/pen/jmbway

[pwnz22]

Any updates on this?

[saurabhkohli]

When centeredSlides is set to false, SWIPER API doesn't calculate the correct snapGrid array.. replace the snapGrid with slidesGrid in the code and everything will work for you.. only if you are not using loop, as I haven't tested that part.

In getInterpolateFunction (line 3144 in swiper.js): This method was having two calls to LinearSpline which also shouldn't be the case but for comment the snapGrid and replace with slidesGrid.

            getInterpolateFunction: function (c) {
                if (!s.controller.spline) s.controller.spline = s.params.loop ?
                    new s.controller.LinearSpline(s.slidesGrid, c.slidesGrid) :
                    //new s.controller.LinearSpline(s.snapGrid, c.snapGrid);
                    new s.controller.LinearSpline(s.slidesGrid, c.slidesGrid);
            },

In s.slideTo method (line 2030 of swiper.js)

            //if (s.snapIndex >= s.snapGrid.length) s.snapIndex = s.snapGrid.length - 1;
            if (s.snapIndex >= s.slidesGrid.length) s.snapIndex = s.slidesGrid.length - 1;

            //var translate = -s.snapGrid[s.snapIndex];
            var translate = -s.slidesGrid[s.snapIndex];

In s.minTranslate and s.maxTranslate (line 681 in swiper.js)

        s.minTranslate = function () {
            //return (-s.snapGrid[0]);
            return (-s.slidesGrid[0]);
        };
        s.maxTranslate = function () {
            //return (-s.snapGrid[s.snapGrid.length - 1]);
            return (-s.slidesGrid[s.slidesGrid.length - 1]);
        };

I hope I may be able to resolve your issue for now until the Swiper Team bring an actual fix.

Also this is my swiper code to load (for percentage slidesOffsetBefore I have done few more minor changes):

(function () {
    var galleryTop = new Swiper('.gallery-top', {
        spaceBetween: '3%',
        slidesPerView: 'auto',
        centeredSlides: true,
        slideToClickedSlide: true
    });
    var galleryThumbs = new Swiper('.gallery-thumbs', {
        spaceBetween: '3.5%',
        centeredSlides: false,
        slidesPerView: 'auto',
        slideToClickedSlide: true,
        slidesOffsetBefore: '7.5%'
    });
    galleryTop.params.control = galleryThumbs;
    galleryThumbs.params.control = galleryTop;
}());

[janistravins]

+1

[nolimits4web]

Issue is closed because of outdated/irrelevant/not actual/needed more information/inactivity.

If this issue is still actual and reproducible for latest version of Swiper, please create new issue and fill the issue template correctly:

• Clearly describe the issue including steps to reproduce when it is a bug.
• Make sure you fill in the earliest version that you know has the issue.
• Provide live link or JSFiddle/Codepen or website with issue

[anephew]

Same issue. Please fix this bug, I don't want use "centeredSlides" with my thumbs

Thank you

[Grawl]

@anephew look it's fixed in Swiper 4! https://codepen.io/Grawl/pen/ZrBEpG

[Grawl]

But there is a new bug

[santamaria7]

It's not fixed.

[paulinekorkina]

You can set 'width' to your thumbs gallery to solve the problem

[Markao17]

When centeredSlides is set to false, SWIPER API doesn't calculate the correct snapGrid array.. replace the snapGrid with slidesGrid in the code and everything will work for you.. only if you are not using loop, as I haven't tested that part.

In getInterpolateFunction (line 3144 in swiper.js): This method was having two calls to LinearSpline which also shouldn't be the case but for comment the snapGrid and replace with slidesGrid.

            getInterpolateFunction: function (c) {
                if (!s.controller.spline) s.controller.spline = s.params.loop ?
                    new s.controller.LinearSpline(s.slidesGrid, c.slidesGrid) :
                    //new s.controller.LinearSpline(s.snapGrid, c.snapGrid);
                    new s.controller.LinearSpline(s.slidesGrid, c.slidesGrid);
            },

In s.slideTo method (line 2030 of swiper.js)

            //if (s.snapIndex >= s.snapGrid.length) s.snapIndex = s.snapGrid.length - 1;
            if (s.snapIndex >= s.slidesGrid.length) s.snapIndex = s.slidesGrid.length - 1;

            //var translate = -s.snapGrid[s.snapIndex];
            var translate = -s.slidesGrid[s.snapIndex];

In s.minTranslate and s.maxTranslate (line 681 in swiper.js)

        s.minTranslate = function () {
            //return (-s.snapGrid[0]);
            return (-s.slidesGrid[0]);
        };
        s.maxTranslate = function () {
            //return (-s.snapGrid[s.snapGrid.length - 1]);
            return (-s.slidesGrid[s.slidesGrid.length - 1]);
        };

I hope I may be able to resolve your issue for now until the Swiper Team bring an actual fix.

Also this is my swiper code to load (for percentage slidesOffsetBefore I have done few more minor changes):

(function () {
    var galleryTop = new Swiper('.gallery-top', {
        spaceBetween: '3%',
        slidesPerView: 'auto',
        centeredSlides: true,
        slideToClickedSlide: true
    });
    var galleryThumbs = new Swiper('.gallery-thumbs', {
        spaceBetween: '3.5%',
        centeredSlides: false,
        slidesPerView: 'auto',
        slideToClickedSlide: true,
        slidesOffsetBefore: '7.5%'
    });
    galleryTop.params.control = galleryThumbs;
    galleryThumbs.params.control = galleryTop;
}());

Sorry, i know is been a long time. Can you help me get slidesOffsetBefore as a percentage value?
Can't get it to work :/

[oneChifu]

+1

[animheryan1]

I just did centeredSlides: true, and fixed the position of slider wrapper with css left: -40%. I know it is not the best solution but it worked for me.

[DD-UX]

@nolimits4web This issue was never fixed, a user provided a workaround however it should be provisory. Please re-open and take care of it properly. You have in your hands the best slider ever!

Thanks