Swiper: Incorrect slide selection when centeredSlides = false, slidesPerView > 1

[Rikk]

There's some error in the number of slides that can be selected when centeredSlides = false and slidesPerView > 1

The result seems to be something like this (I'm not really sure):
available slides = total number of slides - slidesPerView + 1

I found it when implementing a variant of thumbs-gallery demo, so I've made a testcase using it: http://jsfiddle.net/rfc1en11/

[nolimits4web]

That is how Swiper works, control doesn't work based on slide indexes it works on a percentage divider between (maxTranslateParent - minTranslateParent)/(maxTranslateChild - minTranslateChild). So when centeredSlides = false, you can't move thumbs to the most right slide that is why those multiplication percentage became different

Here is solution http://jsfiddle.net/1gLna398/8/

[Rikk]

Thanks, could you please add a note about it? It definitely isn't easy to figure out for those who don't know the source-code specifics.

margin-left: calc(-40% - 5px);

Btw, couldn't you make it do the margin calc automatically when when centeredSlides == false and slidesPerView > 1? Otherwise, I think it would be helpful if it trigger an alert in console.

Or maybe you will find a formula to handle both cases...

[nolimits4web]

It definitely isn't easy to figure out for those who don't know the source-code specifics.

Should be visually easy, it is default offset of first slide from the left in centered slide, where each slide is 20% width in your case

Btw, couldn't you make it do the margin calc automatically when when centeredSlides == false and slidesPerView > 1? Otherwise, I think it would be helpful if it trigger an alert in console.

No, it is normal behavior how it is now, it is just your case which is not default one and pretty specific

[Rikk]

No, it is normal behavior how it is now, it is just your case which is not default one and pretty specific

How could one think two options can't work together if there is nothing about it anywhere?

it is normal behavior how it is now

How would one know what is or isn't normal behavior if all documentation available is an API page and Demos?

[kakashigr]

Another solution which worked for me.

I manually added a data-gflsi="INCREMENTED_VALUE" to each slide of both the main slider and the thumbnail slider.
I did not add any default swiper calls to control each other. Instead I targeted the thumbnail slider slides only like this:
```
// This will only bind to the thumbnail slider items, the main slider has a different class name in the container
jQuery('.swiper-container-single-thumbs .swiper-slide').click(function () {

    var current_index = jQuery(this).attr('data-gflsi');
    // Control the main slider
    mySwiperSingle.slideTo(current_index);

});

```

[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.