-
-
Notifications
You must be signed in to change notification settings - Fork 9.7k
Description
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