Is it possible to create a vertical slider where slide content dictates height like a horizontal slider?
In the back of my mind, no, it’ll be a percentage of list height or a fixed height, but thought I’d ask in case anyone did somehow figure this one out.
Hey @jakes!
This appears to be a known issue with Swiper. I found a GitHub thread that includes a potential fix.
Could you try updating your settings to:
direction: “vertical”
slidesPerView: “auto”
Here’s the direct link to the suggested solution: https://github.com/nolimits4web/swiper/issues/4599#issuecomment-1805420811
Let me know if this resolves it!
@Support-Luis I have no idea how I got to it, but I have a basic CSS Only solution.
The solution is min-height on the slide class set the fit-content using a custom property. This will still break in Safari, the full fix is having a fixed height on the list element and having that set to block. Then finally the slide also needs block.
So, final working solution is:
min-height: fit-content on slide, but Safari needs:
Block display (not flex) on list and slide
Fixed heights on list
Chrome/Firefox work with just fit-content; Safari needs the full setup.
Still have to finish this guy, be you can see the height adjustment works with just css.
Hey @jakes! Thanks for the update!