Aos With Swiper Slider

[umanga907]

Hello @michalsnik !

Thanks for the great library! I am using this library with Swiper slider and it works amazingly. But I see there is an issue on when the screen height is prettry much small below 500px. Well, it totally depends upon what content i am having on my swiper slider. I had followed this technique to use aos with swiper slider https://codepen.io/istyle/pen/ZrPzQj

The animations are to appear when the slide changes but on smaller device with lower height which would be landscape mode, The one with aos classes are hidden and reveals when i scroll down. However, when i am on the smaller screen mostly on mobile landscape the text disappears. You might want to look into this http://iyarbiotech-dev.azurewebsites.net/ Please ignore the other slides, they are under constructions.

[hoangtho123456]

Hi umanga907! I think the issue about screen height, you can set height for class .swiper as below: .swiper-container { width: 100%; height: 300vh; } because Swiper always set height for sliders as 100% default following body height, so your box was hidden following the slider, that's my own opinion^^

[angelixo]

Hi! Im trying to do the same, a Swiper slide that contains inside a few divs with have AOS props; but Firefox doesnt change de opacity of these elements. In @umanga907 codepen if you download it and set direction: 'vertical' you will have same issue con firefox. Any solution?

[yuanzhou3118]

seconded