You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
If the number of grid rows dynamically changes from >1 to 1, the swiper layout is not updated correctly.
Possible cause
It seems that the issue may be caused by classes applied to the shadow DOM. When utilizing multiple grid rows, the .swiper element has a .swiper-grid and possibly a .swiper-grid-column class:
The problem is that changing the grid rows to 1 doesn't remove these classes.
I noticed there is a special method for changing swiper direction swiper.changeDirection(, which dynamically switches .swiper-horizontaland.swiper-vertical` classes. But I didn't find anything similar for the grid.
Related issue
The documentation for parameter update is a bit misleading, at least for grid.
The described options did not work:
The swiper should look the same as if it was initialized with a grid-row=1 attribute.
Actual Behavior
Please see the reproduction link. The pagination is recalculated correctly and shows dots that correspond to a one-row grid. However, the slides are incorrectly wrapped in multiple lines.
Check that this is really a bug
Reproduction link
https://codesandbox.io/s/swiper-grid-forked-hvsngf?file=/index.html
Bug description
If the number of grid rows dynamically changes from >1 to 1, the swiper layout is not updated correctly.
Possible cause
It seems that the issue may be caused by classes applied to the shadow DOM. When utilizing multiple grid rows, the
.swiper
element has a.swiper-grid
and possibly a.swiper-grid-column
class:These classes then prescribe styles for the swiper's child element
.swiper-wrapper
:The problem is that changing the grid rows to 1 doesn't remove these classes.
I noticed there is a special method for changing swiper direction swiper.changeDirection(
, which dynamically switches
.swiper-horizontaland
.swiper-vertical` classes. But I didn't find anything similar for the grid.Related issue
The documentation for parameter update is a bit misleading, at least for grid.
The described options did not work:
Instead, this has worked:
Expected Behavior
The swiper should look the same as if it was initialized with a
grid-row=1
attribute.Actual Behavior
Please see the reproduction link. The pagination is recalculated correctly and shows dots that correspond to a one-row grid. However, the slides are incorrectly wrapped in multiple lines.
Swiper version
10.2.0
Platform/Target and Browser Versions
Chrome under Windows
Validations
Would you like to open a PR for this bug?
The text was updated successfully, but these errors were encountered: