基于swiper4.x.js实现自定轮播，支持手动滑动(踩坑)

小白前进之路

已于 2023-02-08 18:07:20 修改

阅读量594

点赞数

分类专栏：移动端文章标签： javascript 前端 html

于 2023-02-08 17:20:31 首次发布

本文链接：https://blog.youkuaiyun.com/qq_46595660/article/details/128938802

版权

移动端专栏收录该内容

5 篇文章

订阅专栏

文章讨论了奖品轮播功能中的两个技术问题：1)用户滑动页面时，惯性动画在手离开屏幕后无法停止，导致不顺畅体验；2)轮播回到首图时出现卡顿。解决方案包括禁用自由模式下的惯性行为和添加`box-sizing:border-box`来优化布局，以消除卡顿并确保平滑过渡。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

应用场景

奖品的自动轮播，支持用户手动滑动

问题1: 快速滑动页面，手离开屏幕时产生的惯性动画还在运行时，动画不会停止。用户缓慢划动会造成会卡顿几秒，恢复正常。反向滑动，会沿着反向滑动一段距离（速度有时很慢），在恢复正确的方向，（动量反弹）（惯性行为）

// 开始自由模式
freeMode: true,
// 关闭惯性行为，在自由模式下才生效
freeModeMomentum: false,

问题2：奖品轮播一圈后，再次轮到首图，会卡顿一下。

由于已经固定了每个slide的宽度，但是

   // 缺少这行代码
    box-sizing: border-box
    justify-content: flex-start
    align-items: center
    width: 93px
    height: 93px
    border-radius: 5px
    padding: 0 2px 0