Swiper Thumbs with autoScrollOffset

[artfactor-ru]

Check that this is really a bug

• [X] I confirm

Reproduction link

https://codepen.io/KateZzz/full/XWREwmq

Bug description

My code:

var main = new Swiper('.slider__main', {
    slidesPerView: 1,
    spaceBetween: 0,
    thumbs: {
        autoScrollOffset: 1,
        swiper: {
            el: '.slider__thumbs',
            slidesPerView: 5,
            spaceBetween: 19,
       
        }
    },
});

Swiper doesn't show the next thumb when I click on the last visible one, and so that in reverse order.

If i set autoScrollOffset to 1, swiper works correctly in reverse order, but when i swipe it to the next slide, Swiper doesn't show active thumb, it is not visible, but the first visible one is "swiper-slide-next".

Expected Behavior

When i click '2005' thumb, 2006 thumb comes in at the right edge of swiper

Actual Behavior

When i click '2005' thumb, it goes away and 2006 thumb slides to the left edge of swiper

Swiper version

6.8.0

Platform/Target and Browser Versions

Google Chrome

Validations

• [X] Follow our Code of Conduct
• [X] Read the docs.
• [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
• [X] Make sure this is a Swiper issue and not a framework-specific issue

Would you like to open a PR for this bug?

• [ ] I'm willing to open a PR

[css3coder]

I am suffering with this bug from project to project ((

[senher]

I have the same problem

[senher]

I have the same problem

I have the same problem

"swiper": "^5.3.8", "vue-awesome-swiper": "^4.1.1",

[stale[bot]]

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.

[MateuszEckardt]

Hello,

I'd like to leave a comment regarding this bug as well. It is still present in version 8.2.4. I noticed something peculiar, however. It seems like the functionality (meaning thumbs work properly) is there when there is a certain amount of slides - for my case i noticed that when slidesPerView: 3 is ok for thumbs to work.

Here is my setup for reference:

const stepsSwiper = new Swiper('.steps__container', {
  slidesPerView: 2,
  loopedSlides: slidesNumberToLoop,
  loop: true,
  freeMode: true,
  spaceBetween: 20,
  modules: [
    Navigation, 
    FreeMode,
  ],
  breakpoints: {
    960: {
      slidesPerView: 3,
      spaceBetween: 40,
    },
    1120: {
      slidesPerView: 3,
      spaceBetween: 40,
      loopedSlides: slidesNumberToLoop,
    }
  },
})

const slidesSwiper =  new Swiper('.slide__container', {
  loop: true,
  spaceBetween: 20,
  slidesPerView: 1,
  loopedSlides: slidesNumberToLoop,
  modules: [
    Thumbs,
    Navigation,
  ],
  breakpoints: {
    960: {
      spaceBetween: 40,
    },
  },
  navigation: {
    nextEl: '.go__next',
    prevEl: '.go__prev',
  },
  thumbs: {
    swiper: stepsSwiper,
    slideThumbActiveClass: 'step--active',
    autoScrollOffset: 0,
  },
})

Couple of things I wanted to mention about my use case:

• I use different breakpoints, because I wouldn't be able to fit all of the slides on smaller screens (design requirement)
• The issue begins when i use breakpoint > 1120 with slidesPerView: > 3
• slidesNumberToLoop is equal to the number of slides i have + 1 (so for example if i have 7 slides in the system i need to loop 8 slides)

So far I haven't been able to discern why for 3 slides it works just fine and for more than 3 it doesn't (for breakpoint > 1120 that is) and I experience the same behavior as @artfactor-ru described.

I'll try to update/edit this comment whenever I stumble upon something new.

I think it may be related to this issue

Thanks!

[denny7]

I confirm that in v 8.2.4 the bug is still persists.

I've created a workaround. Firstly I removed autoScrollOffset. After that I've added onSlideChange to main swiper. My onSlideChange event looks like this:

let scrollIndex = this.swiper.activeIndex;

if (scrollIndex > 0 && scrollIndex < this.state.data.length - 1) {
    scrollIndex -= AUTO_SCROLL_OFFSET;
}

 this.thumbsSwiper.slideTo(scrollIndex, 500, false);

My Swiper slides comes from this.state.data.

[nolimits4web]

Swiper v9 comes with fully reworked and now different loop functionality. If you have similar issues in Swiper 9, open a new issue with a CodeSandbox showing the issue.