Swiper.js component with some layout fixes

1 min read
|
|
,
|
865 Views

I’ve created a Webflow swiper component that you can copy directly to any Webflow project. I’ve applied some fixes to the layout in some edge cases that I normally encounter.

To copy the component and read the instructions GO TO THIS SNIPPET.

There are 2 custom features that I’ve added to the setup so the swiper is functioning properly.

  1. Fix the slide height issue so that all slides are the same height.
    If the images or content is of different height the slides are not the same height. Setting height: auto to the .swiper-slide and setting the inner element .slide-item height to 100% fixes it with all the slides having the same height.
  2. If the slider is inside a flex or grid layout it doesn’t display properly.
    Normally I put the slider inside a grid layout to manage the spacing between other elements of the section. You’ll notice that if you do that the slider layout will break. To fix this we need to apply min-width: 0; to the parent element of the swiper so it overrides the default value of ‘auto’.