Slide order with column layout and > 3 slides per column wrong

This is a:

• bug

• enhancement

• feature-discussion (RFC)

• Swiper Version: 4.4.1.

• Platform/Target and Browser Versions: macOS 10.13.6, Chrome 69.0.3497.100 (Official Build) (64-bit).

• Live Link or JSFiddle/Codepen or website with isssue: https://codepen.io/sosterwalder/pen/LgbeLw and https://codepen.io/sosterwalder/pen/PybEgK.

What you did

Set up a slider instance using slidesPerView: 2, slidesPerColumn: 4 and slidesPerGroup: 2, therefore a slider with two columns having 4 entries each.

Expected Behavior

Two columns, 4 slides each, in ascending order. E.g. 1 5 9 13 2 6 10 14 3 7 11 15 4 8 12 16

See: https://codepen.io/sosterwalder/pen/LgbeLw.

Actual Behavior

Orderding is not correct, see https://codepen.io/sosterwalder/pen/PybEgK:

1 5 9 13 2 6 10 14 3 7 11 15 8 12 16 20

It seems that the bottom row seems to have an offset, is not in correct order. This happens only when using more than 6 slides per “page” (8 in my case).

[JLueke]

While testing I noticed the main problem for my setup slidesPerColumn: 4 is not the order but the filling of the rows: 12 items where placed as expected. 10 items failed for the 2nd and 3rd page. They only showed 3 items each. Expected would be 1. page 4 items, 2. page 4 items, 3. page 2 item.

My workaround is using grid for display instead of flex and resetting the order:

CSS:

.swiper-wrapper {
  display: grid;
  grid-template-columns: 1fr; // based on slidesPerView
  grid-template-rows: auto auto auto auto; // based on slidesPerColumn
  grid-auto-flow: column;
}

JS:

// run after init and update of swiper
$('selector-for-the-swiper-wrapper').find('.swiper-slide').each(function (i) {
  $(this).css({'order': i, '-webkit-box-ordinal-group': i});
});

[stale[bot]]

This issue has been automatically closed due to inactivity. If this issue is still actual, please, create the new one.