Slick Slider移动端设slidesToShow:1仍显示多张幻灯片问题

• 现有实现：固定940px宽度的网格（表格）跨设备展示，移动端给表格添加overflow-scroll属性支持横向滑动查看完整内容；使用Slick Slider实现轮播功能，已禁用所有触摸/拖拽滑动交互，轮播仅支持箭头操控，全局配置slidesToShow: 1、slidesToScroll: 1，在991px平板断点、479px移动端竖屏断点的响应式配置中也均设置slidesToShow: 1，同时添加了swipe:false、swipeToSlide: false、draggable: false、touchMove: false、touchThreshold:0等禁用滑动的参数
• 异常表现：移动端轮播同时显示3张幻灯片（幻灯片被绿色侧边单元格分隔），点击箭头控件仅会滑动1张内容
• 开发环境：基于Webflow构建器开发，仅针对Slick Slider编写自定义代码
• 实现需求：移动端轮播仅显示1张幻灯片，幻灯片内的网格支持横向溢出滚动以查看完整表格内容，不会同时展示全部3张幻灯片

• 桌面端正常效果：
• 移动端异常效果：
• Webflow编辑预览地址：Webflow编辑预览链接
• 线上发布地址：线上发布页

禁用滑动参数 #

swipeToSlide: false, 
arrows: false, 
draggable: false, 
touchMove: false, 
swipeToSlide: false, 
touchThreshold:0, 

基础显示配置 #

slidesToShow: 1, 
slidesToScroll: 1, 

响应式配置 #

responsive: [ 
  { 
    // 平板端
    breakpoint: 991, 
    settings: { 
      slidesToShow: 1 
    } 
  }, 
  { 
    // 移动端竖屏
    breakpoint: 479,
    settings: {
      slidesToShow: 1
    }
  }
]

HEAD区域嵌入代码 #

<style>
.text-contain  {pointer-events: none;}
.list::-webkit-scrollbar {
  display: none;
}
</style>

BODY区域嵌入代码 #

<!-- 自定义拖拽轮播 -->
<style>
.item {display: inline-block;}
.list {display:block !important;}
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus
{
    outline: none;
}
.slick-slide, .slick-slide *{ outline: none !important; }
</style>

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

<script>
// 文档加载完成后初始化
$( document ).ready(function() {
$('.list').slick({
  dots: false,
  speed: 700,
  infinite: true,
  swipe: false,
  slidesToShow: 1,
  slidesToScroll: 1,
  swipeToSlide: false,
  arrows: false,
  draggable: false,
  touchMove: false,
  swipeToSlide: false,
  touchThreshold:0,
  responsive: [
    {
      // 平板端
      breakpoint: 991,
      settings: {
        slidesToShow: 1
      }
    },
    {
      // 移动端竖屏
      breakpoint: 479,
      settings: {
        slidesToShow: 1
      }
    }
  ]
});

$('.slider-prev').click(function(){
    $("#slider-id").slick('slickPrev');
});

$('.slider-next').click(function(){
    $("#slider-id").slick('slickNext');
});
});
</script>

核心问题共3处，对应修改即可：

• 选择器不匹配：初始化Slick时绑定的是.list元素，但箭头点击事件调用的是#slider-id的Slick实例，两个选择器指向不同元素，控制逻辑和实际渲染的轮播没有关联
• 自定义CSS冲突：原有代码给.item（即轮播slide元素）设置了display: inline-block，覆盖了Slick默认给slide设置的width:100%、display:block样式，导致多个slide横向并排展示，没有被容器限制宽度
• 滚动逻辑错位：原来把横向滚动属性加在了轮播容器.list上，会和Slick的容器布局逻辑冲突，应该把横向滚动属性加在slide内部的940px宽网格/表格元素上，让表格自身在slide内部横向滚动，轮播容器保持overflow:hidden只显示单张slide

修复后可直接替换的代码如下：

1. 替换原有BODY区域内的自定义CSS

.item {
  display: block;
  width: 100%;
}
.list {
  display:block !important;
  overflow: hidden;
}
/* 给内部940px宽表格加横向滚动，把.grid-table替换为你实际的表格类名 */
.list .item .grid-table {
  width: 940px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus
{
    outline: none;
}
.slick-slide, .slick-slide *{ outline: none !important; }
/* 隐藏表格滚动条 */
.list .item .grid-table::-webkit-scrollbar {
  display: none;
}

2. 替换原有Slick初始化JS代码

$( document ).ready(function() {
// 统一轮播选择器，避免实例不匹配
const $slider = $('.list');
$slider.slick({
  dots: false,
  speed: 700,
  infinite: true,
  swipe: false,
  slidesToShow: 1,
  slidesToScroll: 1,
  arrows: false,
  draggable: false,
  touchMove: false,
  swipeToSlide: false,
  touchThreshold:0,
  responsive: [
    {
      breakpoint: 991,
      settings: {
        slidesToShow: 1
      }
    },
    {
      breakpoint: 479,
      settings: {
        slidesToShow: 1
      }
    }
  ]
});
// 箭头事件绑定到对应轮播实例
$('.slider-prev').click(function(){
    $slider.slick('slickPrev');
});
$('.slider-next').click(function(){
    $slider.slick('slickNext');
});
});

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