Slick滑块无限模式下如何实现导航点最短路径切换？

直接设置slidesToScroll负值没用，因为Slick不支持这个参数为负数。要实现点击导航点按最短路径切换，得自定义导航点的点击逻辑，步骤如下：

• 禁用Slick默认的导航点点击行为（默认是直接跳转到目标索引，不会考虑路径长短）
• 计算当前幻灯片和目标幻灯片之间的正向、反向步数，选择更短的路径执行切换

具体代码实现 #

// 初始化Slick滑块（根据你的实际需求调整参数）
const $slider = $('.your-slider');
$slider.slick({
  infinite: true,
  slidesToShow: 1,
  slidesToScroll: 1,
  dots: true
});

const totalSlides = $slider.slick('getSlick').slideCount; // 获取真实幻灯片总数

// 绑定自定义导航点点击事件
$slider.on('click', '.slick-dots li', function(e) {
  e.preventDefault(); // 阻止默认跳转行为
  
  const targetIndex = $(this).index(); // 点击的导航点对应真实幻灯片索引
  const currentSlickIndex = $slider.slick('slickCurrentSlide'); // 当前滑块的索引（含克隆幻灯片）
  const currentRealIndex = currentSlickIndex % totalSlides; // 转换为真实幻灯片索引
  
  // 计算两个方向的切换步数
  const forwardSteps = (targetIndex - currentRealIndex + totalSlides) % totalSlides;
  const backwardSteps = (currentRealIndex - targetIndex + totalSlides) % totalSlides;
  
  // 选择最短路径执行切换
  if (forwardSteps <= backwardSteps) {
    $slider.slick('slickGoTo', currentSlickIndex + forwardSteps);
  } else {
    $slider.slick('slickGoTo', currentSlickIndex - backwardSteps);
  }
});

逻辑说明 #

1. 用slideCount获取真实幻灯片数量，排除Slick无限模式下生成的克隆幻灯片干扰
2. 把当前滑块索引转换成真实幻灯片索引（取模运算），确保和导航点的索引匹配
3. 计算正向（向右）和反向（向左）需要切换的步数，取更小的那个方向调用slickGoTo，实现最短路径的平滑切换

内容的提问来源于stack exchange，提问作者Supertoto