Swiper: Thumbnails Limitation

[hellor0bot]

When there're two sliders synced: one as the main slider, the other one as thumbnails there seem to be some limitations:

Thumbnails must use centeredSlides: true and it can't be loop: true.

Here's a codepen.

I wish we didn't have to center the slides in thumbnails carousel or at least allow looping the slider, to have cloned slides before the first item otherwise there's whitespace before the first slide in thumbnails which in matter of design looks empty.

Slick handles that pretty well. I like Swiper much more, but the thing that we must center thumbnails and allow the whitespace is a severe limitation.

Thanks anyway!

[arthurpf]

I'm struggling with same problem!

[gijsroge]

@arthurpf https://github.com/gijsroge/Swiper-Thumbnails

[mtz]

i got the same problem!

[scooterlord]

+1

[ghost]

+1 I can confirm the issue (at least with the jquery version I'm using).

to reproduce :

• take the code of the thumbnail demo on the swiper website
• remove the parameter : centeredSlides: true
• test

This issue should not be covered by a third party plugin. To me, it's a bug.

I'm afraid to see that the issue is quite old, confirmed, but not planned neither replied...

[adamcbrewer]

Bump.

Any indication on progress with this?

[faction23]

Also ran into this bug today. Spent some time before i realized that syncing sliders only worked with centered thumbs. I will therefor chain them myself through the api and events system but it does seem funky, and at least should be documented so people understand you only support that mode.

[rafegoldberg]

@faction23 @adamcbrewer @Alex360hd @scooterlord @mtz @arthurpf @hellor0bot

one solution to this issue is to use the {virtualTranslate:true} param _alongside_ the {centeredSlides} options. Here's a (quite abbreviated!) snippet of what implementing this might look like:

let
slider = new Swiper("#slider .swiper",{/* main gallery options */}),
thumbs = new Swiper("#thumbs .swiper",{/* thumbnail nav params */
  slidesPerView: "auto",
  centeredSlides: true,
  slideToClickedSlide: true,
  touchRatio: .5,
  virtualTranslate: true // tell Swiper not to apply any translation transforms!
  })

// setup two-way controls
slider.controller.control = thumbs
thumbs.controller.control = slider

This ought to keep the slides from being centered while maintaining the two-way control between our Swipers. Plus, users will still be able to interact with (i.e. click or swipe on) the thumbnail swiper!

You may have to override some of Swiper's default styles with your own custom CSS to get e'erything polished and in place — nothing overly complex tho! The following worked for me:

#thumbs .swiper{
  &-wrapper {
    display: flex;
    flex-flow: nowrap row;
    justify-content: center;
    align-items: center;
    }
  &-slide {
    margin: 0 7px;
    }
  }

[adamcbrewer]

@rafegoldberg Nice, didn't know virtualTranslate was an option.

The way I did it was to centeredSlides the thumbs and set a margin-left: -50% (position or translate also possible) to it, with the parent overflow: hidden.

[rafegoldberg]

@adamcbrewer word, that's a good idea – will have to try it out!

[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