如何在Slick Slider中设置图片间距？

Slick Slider会自动生成包裹滑块的DOM结构，直接给自定义的.city元素加margin/padding/gap无效，是因为插件默认样式会覆盖这些设置，以下是两种有效解决方案：

方案1：使用Slick官方配置参数（推荐） #

在初始化Slick Slider时，添加spaceBetween参数设置滑块间距，单位为像素：

$('.case_studies_slider').slick({
  slidesToShow: 1, // 根据需求调整同时显示的滑块数量
  slidesToScroll: 1,
  spaceBetween: 30, // 这里设置你需要的间距大小
  // 保留其他原有配置项
});

这是Slick官方提供的标准方式，不会和插件样式冲突，兼容性最优。

方案2：通过CSS样式调整 #

如果无法修改JS配置，可针对Slick生成的.slick-slide元素调整样式：
修改你的CSS代码，调整.slick-slide和.city的样式：

.case_studies {
  // 保留原有title、container样式
  .slick-slide {
    display: inline-block;
    padding-right: 30px; // 设置右侧间距，按需调整数值
    box-sizing: border-box; // 确保padding不会撑大元素宽度
    img {
      width: 100%; // 修改为100%，适配父容器宽度
      height: 70vh;
    }
  }
  .case_studies_slider {
    .city {
      position: relative;
      width: 100%; // 添加此行，让.city充满.slick-slide的可用宽度
      // 移除原有的margin-right、gap等无效设置
      padding-left: 8vh;
      padding-right: 20vh;
      // 保留原有h2样式
    }
  }
}

注意事项： #

• 不要直接给.city加margin，否则会干扰Slick的滑块宽度计算，导致排列异常
• 使用CSS方案时，必须给.city设置width:100%，避免padding导致图片宽度超出预期
• 若需要左右双向间距，可同时设置.slick-slide的padding-left和padding-right，并配合slidesToShow数值调整

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