'Swiper.js is laggy on Android with free mode, loop, and auto play
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.com/shorts/Qmlve7qS22o?feature=share
I tried to implement the same component 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.com/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 component 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?
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
