[BUG] Margin brokes in horizontal list of cards with vertical lists (nested swipers)
Closed this issue · 0 comments
Describe the bug
My goal is to create a column view from Finder in my electron pet project.
(Finder for reference)
That is, I need a horizontal list of cards. Each of the cards contains a vertical list of items.
Only in this library I found virtual lists(which is perfect for long files lists) with a custom scrollbar(default chrome looks ugly) already built in.
Bug: The margins between the elements are calculated incorrectly, if slidesPerView = 10, then there are none and the Slider is compressed into a thin strip. If there are < 5, then on the contrary it goes far beyond the borders.
The whole point is precisely in the presence of an additional container element between the external horizontal slider and the nested vertical ones. If you remove it, then everything works fine(but I need it), except that when slidesPerView = "auto" an error occurs:
To Reproduce
Here on line 17, this div represents here a card widget. In a real application, its a Card from MUI.
https://codesandbox.io/s/swiper-nested-react-forked-tb1bsn?file=/src/App.jsx
Expected behavior
There are margins between the elements
Screenshots
How it looks:
How it should look:
Desktop (please complete the following information):
- Browser: Chrome 99.0.4844.51
- OS: Arch Linux