Slick Carousel商品轮播图右侧出现多余内边距问题求助

解决步骤 #

1. 移除冲突的自定义CSS
   首先删除你现有CSS中针对.slick-track的自定义规则，这段规则会覆盖slick自动计算的轨道宽度和布局属性，是导致间隙异常的核心原因：

.slick-track {
  display: flex;
  width: 100%;
}

2. 调整slick初始化配置
   在你现有的data-slick配置中添加margin: 0参数，关闭slick默认的slide间距：

<div data-slick='{"slidesToShow": 3, "margin": 0}' class="feature-grid-collection collection-slider">

3. 补充缺失的容器尺寸规则
   给你的商品项和图片添加基础尺寸限制，避免布局溢出：

.grid-product {
  width: 100%;
  padding: 0; /* 先清空默认内边距 */
}
.collection-slider-image_wrapper img {
  width: 100%;
  height: auto;
  display: block; /* 清除图片默认下方空白 */
}

4. 自定义间距（可选）
   完成以上步骤默认间隙完全清除后，你可以直接给.grid-product添加左右内边距实现自定义间距，比如：

.grid-product {
  padding: 0 12px; /* 左右各12px间距，可自行调整数值 */
}

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