admin 管理员组文章数量: 1184232
Recently, a lot of applications start to feature this kind of UI on their page:
A scrollable, looped, while autoplay swiper (an example screenshot from the app infltr)
I tried to implement the same ponent in my React project.
After trials, I found Swiper.js could be the closest key to the door with freeMode, loop and autoPlay
My settings are as follows:
const swiperSetting = {
slidesPerView: 'auto',
spaceBetween: 10,
longSwipes: false,
grabCursor: true,
centeredSlides: true,
freeMode: {
enabled: true,
momentumBounce: false,
},
loop: true,
autoplay: {
delay: 0,
disableOnInteraction: false
},
speed: 5000,
};
The result is like the following: (screenshot of Pixel 3A XL, Android 10)
As you can see from the above clip, there's an obvious latency between finger touch and the animation of the swiper.
However, this laggy condition wasn't seen on Pixel 6, Android 12, or iOS devices
Pixel 3a XL is a 2019 product, not a low-end device, so I don't expect that this ponent would be so laggy on this device.
Any suggestion on how to better tune Swiper.js?
Or, is it an inevitable bug on the older versions of Android devices?
Or, there's some other solution better fits my need?
Recently, a lot of applications start to feature this kind of UI on their page:
A scrollable, looped, while autoplay swiper (an example screenshot from the app infltr)
https://youtube./shorts/Qmlve7qS22o?feature=share
I tried to implement the same ponent in my React project.
After trials, I found Swiper.js could be the closest key to the door with freeMode, loop and autoPlay
My settings are as follows:
const swiperSetting = {
slidesPerView: 'auto',
spaceBetween: 10,
longSwipes: false,
grabCursor: true,
centeredSlides: true,
freeMode: {
enabled: true,
momentumBounce: false,
},
loop: true,
autoplay: {
delay: 0,
disableOnInteraction: false
},
speed: 5000,
};
The result is like the following: (screenshot of Pixel 3A XL, Android 10)
https://youtube./shorts/qkSPWNX9YXk?feature=share
As you can see from the above clip, there's an obvious latency between finger touch and the animation of the swiper.
However, this laggy condition wasn't seen on Pixel 6, Android 12, or iOS devices
Pixel 3a XL is a 2019 product, not a low-end device, so I don't expect that this ponent would be so laggy on this device.
Any suggestion on how to better tune Swiper.js?
Or, is it an inevitable bug on the older versions of Android devices?
Or, there's some other solution better fits my need?
4 Answers
Reset to default 3Activate the parameter cssmode will fix this issue.
In my case, it was a css rule that has bad performance while swiping.
filter: drop-shadow( ... );
Removing all occurences of that css rule inside of the elements inside of swiper fixed it for me.
Try adding following code to the CSS:
.swiper-container {
transform: none;
}
Had the same problem (glitched Slider) and this worked for me
I had a similar lag issue (on Android). In a simple page, I had a slider and it caused the page scroll to be laggy. The slider itself was also laggy. I tried the solutions mentioned here, but none really worked. The problem was with Tailwind CSS.
It seems that I used drop-shadow instead of shadow on some card element. The slider was inside this card. drop-shadow uses the filter property. This was the cause. Switching to shadow (that is box-shadow) solved the issue.
本文标签：
版权声明：本文标题：javascript - Swiper.js is laggy on Android with free mode, loop, and auto play - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://roclinux.cn/p/1741811433a2316520.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论