Thursday, June 09, 2022
The Great Tit
Updated: 9. 6. 2022, Added: 9. 6. 2022

Oxygen 4.0 - fix Swiper.js slider

After Oxygen 4.0 update you may encounter problem with Swiper slider used within repeater. To fix this problem, add this CSS styles.

The Swiper.js repeater problem after Oxygen 4.0

Wrong behavior of Swiper.js slider after Oxygen 4.0 update

Fix it back to normal appearance

What to do? Just add a little CSS to make it working like normal:

Normal behavior of Swiper.js slider in Oxygen Builder
.swiper-wrapper {
        flex-wrap:nowrap;
        flex-direction:row;
	align-items:start;
	justify-content:unset;
        width:100%;
        height:inherit;

}

I am using the class .swiper-wrapper on repeater element. If you use other class, please change the code. You can use default repeater class .oxy-dynamic-list, but be aware, it will change CSS for all your repeaters, so you better use some custom class only for Swiper.js sliders in Oxygen.

Did I help you? Fuel our WordPress journey
Beep this article to your friends!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

2 comments on “Oxygen 4.0 - fix Swiper.js slider”

linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram