javascriptswiper.js

Equal height columns using Swiper in free mode

I am trying to create flexbox equal height columns using Swiper in freemode.

https://codesandbox.io/p/sandbox/swiper-freemode-forked-t59k2l?workspaceId=eee5ba17-3be5-442c-9d85-157396198d4f

It works by adding display: flex to the .swiper-wrapper slot using the Inspector in the shadow DOM because this is the parent of the <swiper-slide>.

How can I set the CSS of the parent of to be flex?

Solution

  • By default, swiper-slide has height: 100%.
    Set swiper-slide { height: auto; }