Swiper: Thumbs control only works with centeredSlides

[birgerstoeckelmann]

Hello! Currently I'm facing a problem with the centeredSlides property set to false.
I've got one fullscreen top gallery with one image per view:

new Swiper('#gallery-top', {
  spaceBetween: 0,
});

And another gallery with same pictures as thumbs control for top gallery:

new Swiper('#gallery-thumbs', {
  spaceBetween: 10,
  touchRatio: 0.5,
  slidesPerView: 'auto',
  slideToClickedSlide: true,
  centeredSlides: true,
})

Everything is working fine with centeredSlides set to true. Setting it to false breaks the controling functionality and the slides of the thumbnail gallery are no longer clickable. This happens if all thumbnail images are visible directly (e.g. a gallery with three pictures) or the last couple of images scroll into view.

Thumbnail slides can't be clicked anymore and the main gallery jumps to the last slide suddenly when clicking the first image of the last set of thumbnail pictures.

Is this a bug or is anything configured wrong?

[amouratoglou]

I have the same issue. I hope there is solution, I want my nav thumb slides to be aligned left and no extra spaces.
Check here this might be a solution for your case.

1209 issue

While it solves it partiallly, it does not look like a standard thumb navigation.

[birgerstoeckelmann]

@amouratoglou Thanks! That helped a litte using

.swiper-wrapper{
  margin-left:calc(-50% + 73.5px);
}

while 73.5px is half the width of a thumbnail. Would be great if the thumbnail navigation stops scrolling out of the container. I guess it's a better solution to program a fixed custom thumbnail navigation which activates the parent slide by index.

[stillworks]

@birgerstoeckelmann idea doesn't work on a fullscreen slider with one slide visible where the height and width of the container is set by a js snippet.

[Grawl]

I created a pen that shows this issue.

[shrpne]

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

Also related issues with workarounds: #1138 #1209

[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

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.