Keen Slider开启free mode后autoplay仍吸附 如何实现连续无停顿滚动？

问题根源 #

Keen Slider 自带的 autoplay 插件默认逻辑是逐张切换幻灯片，和 free 模式的无对齐滚动逻辑不兼容，即便开启 mode:"free" 也会触发强制对齐吸附。

可行实现方案 #

你需要弃用自带的 autoplay 插件，自定义连续滚动逻辑，具体实现如下：

1. 核心配置调整

首先禁用free模式下的内置吸附，同时删除自带的autoplay相关配置：

import KeenSlider from 'keen-slider'

const slider = new KeenSlider('#my-slider', {
  mode: 'free',
  // 关键配置：完全禁用free模式下的所有吸附行为
  free: {
    snap: false
  },
  slides: {
    perView: 'auto', // 根据你的需求调整，固定数值也可
    spacing: 16,
  },
  loop: true, // 开启无限循环滚动，不需要可删除
  // 删掉所有自带autoplay的配置
})

2. 自定义连续自动滚动逻辑

通过定时器控制滑块小步长移动，完全避开内置的逐张切换吸附逻辑：

let autoplayTimer = null
const SCROLL_SPEED = 1 // 每次滚动的像素值，数值越大滚动越快
const INTERVAL = 20 // 滚动触发间隔，单位ms，数值越小滚动越流畅

// 启动自动滚动
const startAutoScroll = () => {
  if (autoplayTimer) return
  autoplayTimer = setInterval(() => {
    // 第二个参数传false，跳过移动后的吸附校验
    slider.moveBy(SCROLL_SPEED, false)
  }, INTERVAL)
}

// 停止自动滚动
const stopAutoScroll = () => {
  clearInterval(autoplayTimer)
  autoplayTimer = null
}

// 可选：鼠标悬停暂停滚动，移开恢复
const sliderDom = document.getElementById('my-slider')
sliderDom.addEventListener('mouseenter', stopAutoScroll)
sliderDom.addEventListener('mouseleave', startAutoScroll)

// 页面加载完成后启动滚动
startAutoScroll()

// 页面卸载时清除定时器避免内存泄漏
window.addEventListener('beforeunload', stopAutoScroll)

效果调整说明

• 调整 SCROLL_SPEED 或者 INTERVAL 数值即可修改滚动速度，二者都可以根据你的实际需求自由调整
• 如果不需要循环滚动，删除配置项里的 loop: true 即可，滚动到最后一张幻灯片后会自动停止
• 手动拖动滑块不会打断自动滚动逻辑，放开鼠标后会继续执行连续滚动

内容的提问来源于stack exchange，提问作者Akshay K Nair