sandbox: demo
Swiper version: ^11.0.5
The arrangement of slides and rows per column is not as expected. I am currently using Vue with the swiper component, but the issue persists even in a simple HTML demo. To achieve 3 rows per column in a single view, I have configured it like this:
- slidesPerView: 1
- grid: { rows: 3, fill: "row" }
However, only 2 rows are displayed on the first page and the order is incorrect.
Since I am iterating through the slides dynamically, fitting 3 elements into a single slide is not feasible.
I attempted to remove the fill property, but then all slides appeared on the first page. Modifying the CSS of .swiper-wrapper by using display: grid; grid-template-rows: repeat(3, 1fr); also did not yield the desired outcome. SlidesPerColumn does not seem to function in this version of Swiper.
Is there a possible solution to address this issue?
Expected behavior
for 1st page
1
2
3
for 2nd page
4
Actual behavior
for 1st page
1
3
for 2nd page
2
4