Author is Aleš Sýkora
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
Fix it back to normal appearance
What to do? Just add a little CSS to make it working like normal:
.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.
Thanks!! Would you please explain how to initialize various sliders with swipersjs in the same page?
Hello Camilo, I wrote this: Initialize multiple Swiper sliders on same page is it what you are looking for?