Thumbs swiper jumping to wrong slide

[muecke1312]

This is a (multiple allowed):

• bug

• enhancement

• feature-discussion (RFC)

• Swiper Version: 5.3.6

• Platform/Target and Browser Versions: Windows/Chrome

• Live Link or JSFiddle/Codepen or website with isssue: PREFERABLY (IF YOU WANT YOUR ISSUE TO BE RESOLVED ASAP).

What you did

I have a horizontal Swiper with vertical thumbs. For example with 6 thumbs. I click the thumb slides to navigate the big horizontal Swiper. Additionally I have arrows up/down to slide the thumbs.

Expected Behavior

If I click a thumb the following should happen:

• the main swiper should show ne new slide
• the thumb swiper should remain in its position showing the currently active thumb I did click

Actual Behavior

• the main swiper should show ne new slide -> this part is fine
• if I click the first or last of my actually visible thumbs (for example 1 or 6) it works correctly
• if I click 2-5 thumbs the thumb-swiper is slided to the prev 6 thumbs.

I did analyse the problem and it is relayed to a Math.floor() in slideTo-method, which should be a Math.ceil(). With this fix it worked for me and I will add a pull request for this issue.

var optionsMainSwiper = {
          slidesPerView: 1,
          slidesPerGroup: 1,
          lazy: {
            loadPrevNext: true,
            loadPrevNextAmount: thumbsPerSlide
          },
          preloadImages: false,
          allowTouchMove: false,
          thumbs: {
             swiper: _this.thumbsSwiper
          }
        };

var optionsThumbSwiper = {
          direction: 'vertical',
          slidesPerView: 6,
          slidesPerGroup: 6,
          navigation: {
            nextEl: '.thumbs-control.right',
            prevEl: '.thumbs-control.left'
          },
          slideToClickedSlide: true,
          options.loop: true,
          options.loopFillGroupWithBlank: true
        };

[dtgit2020]

Hi I'm also having this issue and can't get vertical thumb with horizontal slider to work properly. Did you resolve it?
Any JSFiddle/Codepen example?

[pam81]

Do you think it can resolve this #3816 ?
Is you PR already merged?

[DAnn2012]

The PR to which the author of this issue report refers is #3524 but erroneously the number 5323 was indicated as the reference issue and not the correct one #3523

Also, a few days ago, the bot has automatically marked this PR as stale because it has not had recent activity. It will be closed if no further activity occurs.

[HandHugs]

I have the same issue but with a horizontally scrolled thumb slider with slidesPerView and slidesPerGroup enabled

Navigating through top gallery provides expected result, except active thumb is not 'revealed' or scrolled to. Clicking through thumbs causes crazy sliding around of thumb slider and hiding of active thumb.

https://stackblitz.com/edit/swiper-thumbs-issue-slidesperview?file=index.html

[ico85]

Guys, this is still not fixed. It's a basic behaviour which should work.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale]

This issue has been automatically closed due to inactivity. If this issue is still actual, please, create the new one.

[fdverwoerd]

Having the same issue; What makes this break;

if (document.querySelector(".thumbnail-swiper")) {
    const thumbs = new Swiper(".thumbs-swiper", {
      slideThumbActiveClass: "swiper-slide-thumb-active",
      spaceBetween: 10,
      slidesPerView: 4,
      freeMode: true,
      watchSlidesProgress: true,
    });
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    const main = new Swiper(".thumbnail-swiper", {
      spaceBetween: 0,
      thumbs: {
        swiper: thumbs,
        multipleActiveThumbs: false,
      },
      navigation: {
        nextEl: ".c-swiper-button-next",
        prevEl: ".c-swiper-button-prev",
      },
    });
  }

How come the demo works just fine? Is the build inside demo 'built' differently? :)

https://codesandbox.io/p/sandbox/5mw76j?file=%2Findex.html

Or does it have to do with 'modules' way?

p.s. If I remove modules: [Navigation, Thumbs], it seems to work! Why is that? I alwasy thought you had to include the used modules in swiper 11?