Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
5 of 6 tasks
FrancescoMessage opened this issue Jan 27, 2025 · 1 comment
Open
5 of 6 tasks

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

FrancescoMessage opened this issue Jan 27, 2025 · 1 comment

Comments

@FrancescoMessage
Copy link

FrancescoMessage commented Jan 27, 2025

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
@FrancescoMessage
Copy link
Author

FrancescoMessage commented Jan 28, 2025

Find now an alert in console: "Swiper Loop Warning: Loop mode is not compatible with grid.fill = row".
Ok, but it seems it's not in documentation. Do you think loop mode and grid.fill = row will work in the future? Thanks

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant