Skip to content

Swiper with grid not showing proper order #8097

@jayna456

Description

@jayna456

Check that this is really a bug

  • I confirm

Reproduction link

https://codesandbox.io/p/sandbox/g5jtjy?file=%2Findex.html%3A5%2C27

Bug description

I have reproduce this link in angular 17 with swiper 11: grid demo I can't generate the same.

I was getting like this:
1 2 3 4 5
6 7 8 9

And it's not the same as codesandbox demo of grid.

css:
`html,
body {
position: relative;
height: 100%;
}

body {
background: #000;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color: #fff;
margin: 0;
padding: 0;
}

.swiper {
width: 100%;
height: 100%;
margin-left: auto;
margin-right: auto;
}

.swiper-slide {
text-align: center;
font-size: 18px;
border: solid 2px yellow;
height: calc((100% - 30px) / 2) !important;
display: flex;
justify-content: center;
align-items: center;
}

.mySwiper .swiper-wrapper {
flex-wrap: wrap !important;
}

.mySwiper.swiper-grid-column > .swiper-wrapper {
flex-direction: unset;
}`

.ts file:
declare const sx_shows: () => void; ngOnInit(): void { (function ($) { setTimeout(function () { sx_shows(); }, 0); })(); }

js file:
function sx_shows(){ var swiper = new Swiper(".mySwiper", { slidesPerView: 3, grid: { rows: 2, fill: 'row' }, spaceBetween: 30, pagination: { el: ".swiper-pagination", clickable: true, }, }); }

Please help me out where I am mistaken!

Expected Behavior

No response

Actual Behavior

No response

Swiper version

11.0.5

Platform/Target and Browser Versions

macOS

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

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