Slick Slider移动端指定宽度仅显示单张幻灯片横向滚动配置问题

核心问题排查 #

移动端配置slidesToShow:1仍显示多张幻灯片，是3处代码冲突/错误导致的：

• 自定义CSS破坏Slick默认宽度计算：原有代码中.item {display: inline-block;}让幻灯片项按内容宽度收缩，覆盖了Slick默认给单张幻灯片设置的100%宽度规则，直接导致3张幻灯片挤在同一行
• 箭头按钮选择器不匹配：轮播初始化绑定的是.list元素，但箭头点击事件绑定的是#slider-id，两个选择器指向不同元素，会导致箭头切换失效
• 滚动容器设置错误：横向滚动属性被加在了轮播外层容器上，没有加在单张幻灯片内部，才会出现滚动时多张幻灯片同时露出的情况

修复步骤（仅需修改少量代码，无需调整Webflow核心结构） #

1. 修改BODY区域插入的自定义CSS，删除破坏布局的样式，补充幻灯片滚动规则
   替换原有CSS部分为以下代码：

.list {
  display:block !important;
  overflow: hidden;
}
.slick-slide {
  overflow-x: auto;
}
.slick-slide::-webkit-scrollbar {
  display: none;
}
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus
{
    outline: none;
}
.slick-slide, .slick-slide *{ outline: none !important; }

注意删除原代码里的.item {display: inline-block;}，这行是导致布局错乱的核心原因

2. 修正Slick轮播初始化代码，补充宽度控制配置，修复箭头选择器错误
   替换原有JS初始化部分为以下代码：

$( document ).ready(function() {
  $('.list').slick({
    dots: false,
    speed: 700,
    infinite: true,
    swipe: false,
    slidesToShow: 1,
    slidesToScroll: 1,
    variableWidth: false,
    arrows: false,
    draggable: false,
    touchMove: false,
    swipeToSlide: false,
    touchThreshold:0,
    responsive: [
      {
        breakpoint: 991,
        settings: {
          slidesToShow: 1,
          variableWidth: false
        }
      },
      {
        breakpoint: 479,
        settings: {
          slidesToShow: 1,
          variableWidth: false
        }
      }
    ]
  });

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

  $('.slider-next').click(function(){
      $(".list").slick('slickNext');
  });
});

配置说明：新增variableWidth: false强制所有断点下每张幻灯片占满轮播容器宽度，删除了原代码中重复的swipeToSlide: false配置，修正了箭头事件绑定的选择器

3. Webflow可视化配置确认
   选中轮播内的每个.item幻灯片元素，在样式面板设置宽度为100%，940px的固定宽度仅设置给幻灯片内部的表格组件即可。设置完成后，小屏设备下单张幻灯片会占满整个视口宽度，内部940px的表格可以在幻灯片区域内横向滚动查看，不会再出现多张幻灯片同时显示的问题。

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