Slick Carousel问题：最后一页仅1项且slidesToShow>slidesToScroll时箭头失效

问题概述 #

• 幻灯片总数：9
• 配置参数：slidesToShow: 5，slidesToScroll: 4
• 异常现象：点击切换箭头到最后一页后，无法继续触发滚动操作

问题原因 #

默认轮播组件的滚动逻辑会严格按照slidesToScroll的步长计算可滚动范围：

1. 初始状态显示第1-5个幻灯片（索引0-4）
2. 点击一次下箭头，滚动4个，显示第5-9个幻灯片（索引4-8）
3. 此时剩余可滚动的幻灯片数量为0（已显示全部），组件会自动禁用下箭头或不响应滚动操作

解决方法 #

如果需要实现循环滚动（最后一页点击箭头回到开头），可以自定义导航按钮的点击事件，手动控制滚动位置：

代码示例 #

// 假设轮播实例已初始化，变量名为slider
const slider = $('.your-slider-class').slick({
  slidesToShow: 5,
  slidesToScroll: 4,
  // 保留其他原有配置项
});

// 自定义下箭头点击逻辑
$('.slick-next').on('click', function(e) {
  e.preventDefault();
  const currentSlide = slider.slick('slickCurrentSlide');
  const totalSlides = slider.slick('getSlick').slideCount;
  const slidesToShow = 5;

  // 计算当前可见区域的最后一个幻灯片索引
  const lastVisibleIndex = currentSlide + slidesToShow - 1;

  // 如果已显示最后一组幻灯片，跳转到开头
  if (lastVisibleIndex >= totalSlides - 1) {
    slider.slick('slickGoTo', 0);
  } else {
    // 否则执行正常滚动
    slider.slick('slickNext');
  }
});

// 自定义上箭头点击逻辑（可选，实现反向循环）
$('.slick-prev').on('click', function(e) {
  e.preventDefault();
  const currentSlide = slider.slick('slickCurrentSlide');

  // 如果当前是初始位置，跳转到最后一组
  if (currentSlide === 0) {
    slider.slick('slickGoTo', 4); // 最后一组的起始索引为4
  } else {
    slider.slick('slickPrev');
  }
});

替代方案 #

如果不需要循环滚动，仅需适配当前幻灯片数量的滚动逻辑，可以动态计算slidesToScroll的值：

• 当剩余未显示的幻灯片数量小于设定的slidesToScroll时，滚动剩余数量的幻灯片
• 但此场景下9个幻灯片搭配slidesToShow=5的配置，剩余可滚动数量为0，此方案仅适用于其他数量组合

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