Skip to content

Wrong slides order with grid + fill row + loop #7870

Open
@FrancescoMessage

Description

Check that this is really a bug

  • I confirm

Reproduction link

https://codepen.io/ftendi/pen/jOJKBMJ

Bug description

I have a Swiper with 3 columns / 2 rows and grid is filled by rows.
Total number of slides is 12.
My desired fill order is the following:

1..........2..........3         #         7...........8...........9
4..........5..........6         #         10..........11..........12

To obtain this, I've set:

slidesPerView: 3,
slidesPerGroup: 3,
grid: {
    rows: 2,
    fill: 'row'
}

If I also enable loop mode (leaving loopAddBlankSlides as default true), the slides' order is wrong after the first loop.
Slides appearance before the loop is:

1..........2..........3         #         7...........8...........9
4..........5..........6         #         10..........11..........12

Slides appearance after the first loop is:

1..........4..........2         #         7..........10..........8
5..........3..........6         #         11..........9..........12

Expected Behavior

I expect the right order of slides after first loop.

Actual Behavior

The slides' order after first loop is wrong.

Swiper version

11.2.1

Platform/Target and Browser Versions

macOS 15.2 - Chrome 132.0.6834.110

Validations

  • Follow our Code of Conduct
  • Read the docs.
  • Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
  • Make sure this is a Swiper issue and not a framework-specific issue

Would you like to open a PR for this bug?

  • I'm willing to open a PR

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions