Swiper: Previous arrow navigation works wrong when even number of items

[radojesrb]

This is a:

• [x] bug

• Swiper Version: 3.4.0
• Platform/Target and Browser Versions: macOS, Chrome 54,

What you did

Placing Even number of items (8)

Instantiating Swiper with following config:

{
  pagination: '.swiper-pagination',
  paginationClickable: true,
  nextButton: '.swiper-button-next',
  prevButton: '.swiper-button-prev',
  spaceBetween: 30,
  loop: true,
  slidesPerView: 3,
  slidesPerGroup: 3
}

Expected Behavior

When having the even number of items and odd "slidesPerGroup" combined with odd "slidesPerView" Swiper needs to handle Previous arrow navigation better.

Actual Behavior

Clicking on Previous arrow reveals the bug, as displayed in the gif bellow.

[bembelstemmer]

We are experiencing the same problem for some time now. It occurs when the slide count is not a multiple of the group size.

Since the content is created dynamically in our case and the group count can be switched we had to dynamically add or remove slides before initialization to workaround this problem.

[radojesrb]

We also needed to workaround this issue.
Hopefully it will be addressed soon.
Workarounds are time bombs...

[patrickruetter]

Are there any updates on this bug?

[motou]

The problem happens only when the number of items cannot be divided by the "slidesPerGroup" / "slidesPerView" and "loop" is set as true. It does NOT matters when the number of items or anything is even or odd.

The cause seems like that the generated sliders at the end aren't taken into consideration by calculating the active slide index.

Code example is here: https://codepen.io/motou/pen/LxbjyM

[patrickruetter]

If you only have 4 slides on a 3 slidesPerGroup slider, it's even worse:

Code example: https://codepen.io/anon/pen/EZvRqE

[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

[arnisjuraga]

I have simpilar issue on this - that "previous" slides are not displayed in correct order. And are missing.
using 4.0.6 version.

[arnisjuraga]

It seems, setting values to these, has fixed looping, but it still has a different sliding effects, when slided back and forward:

~js
var swiper_1 = new Swiper('[data-module-id="13"] > .swiper-container', {
slidesPerView: 6,
slidesPerGroup: 6,
loopedSlides: 6, // <<-- this
loopAdditionalSlides: true, // <<-- and this
spaceBetween: 1,
loop: true,
loadPrevNext: true,
lazy: true,
watchSlidesVisibility: true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
breakpoints: {
// not having a problem with this, just leaving it for a full example
320: {
slidesPerView: 2,
slidesPerGroup: 2
},
480: {
slidesPerView: 3,
slidesPerGroup: 3
},
768: {
slidesPerView: 4,
slidesPerGroup: 4
}
}
});
~

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