如何在Flutter中实现如图所示的无限轮播滑块(Swiper)?
支持无限滚动的滑块/轮播库推荐
以下几个成熟的库都能实现你需要的无限水平滚动滑块效果:
- Swiper.js:业内最常用的滑块工具,原生支持无限循环滚动。初始化时开启
loop: true,再用slidesPerView设置单屏显示的滑块数量,就能实现示例里的连续滚动效果,还能搭配自动播放、自定义动画等功能,适配移动端和PC端。 - Glide.js:轻量级的滑块库,体积小配置简单。设置
type: 'carousel'开启轮播模式,再通过perView控制显示数量,就能实现无限滚动,适合追求性能的场景。 - Flickity:主打触摸交互的滑块库,开启
wrapAround: true就能实现无限滚动,拖拽滑动的流畅度很高,和示例的交互逻辑匹配度强,还支持自适应布局。
如果不想依赖第三方库,也可以自己用原生JS实现核心逻辑:复制首尾的滑块节点,当滚动到边界时切换到对应的复制节点,同时重置滚动位置,以此模拟无限滚动的视觉效果。
内容的提问来源于stack exchange,提问作者Radhabinod
相关产品推荐
相关产品推荐

