Slick Carousel幻灯片粘连、图片显示异常问题求助

问题场景 #

我用Slick Carousel实现了一个滑块，要求同时显示4张幻灯片，但给幻灯片添加padding后，图片开始消失，滑块布局损坏。预期效果是每张幻灯片带有内边距和浅灰色背景，同时正常展示4张内容。

问题根源 #

直接给Slick的幻灯片项（.partners__slider--item）添加padding会干扰Slick的宽度计算逻辑——Slick会把padding计入幻灯片总宽度，导致4张幻灯片的总宽度超出容器，进而被挤压、隐藏。

修复方案 #

将内边距和背景色从Slick的幻灯片元素上剥离，放到幻灯片内部新增的嵌套容器中，让Slick基于纯净的幻灯片元素计算布局。

修改后的HTML #

给每个幻灯片项新增嵌套容器，用于承载样式：

<div class="partners">
  <div class="partners__slider">
    <div class="partners__slider--item">
      <div class="partner-card">
        <img src="./assets/images/partner1.png" alt="合作伙伴" />
      </div>
    </div>
    <div class="partners__slider--item">
      <div class="partner-card">
        <img src="./assets/images/partner2.png" alt="合作伙伴" />
      </div>
    </div>
    <div class="partners__slider--item">
      <div class="partner-card">
        <img src="./assets/images/partner3.png" alt="合作伙伴" />
      </div>
    </div>
    <div class="partners__slider--item">
      <div class="partner-card">
        <img src="./assets/images/partner4.png" alt="合作伙伴" />
      </div>
    </div>
    <div class="partners__slider--item">
      <div class="partner-card">
        <img src="./assets/images/partner1.png" alt="合作伙伴" />
      </div>
    </div>
    <div class="partners__slider--item">
      <div class="partner-card">
        <img src="./assets/images/partner2.png" alt="合作伙伴" />
      </div>
    </div>
    <div class="partners__slider--item">
      <div class="partner-card">
        <img src="./assets/images/partner3.png" alt="合作伙伴" />
      </div>
    </div>
    <div class="partners__slider--item">
      <div class="partner-card">
        <img src="./assets/images/partner4.png" alt="合作伙伴" />
      </div>
    </div>
  </div>
</div>

修改后的CSS #

将样式转移到嵌套容器，确保Slick幻灯片元素无额外内边距：

.partners {
  margin-top: 200px;
  
  &__slider {
    &--item {
      // 清空内边距，让Slick正常计算宽度
      padding: 0;
      
      .partner-card {
        padding: 39px 89px;
        background-color: #fafafa;
        
        img {
          max-width: 290px;
          max-height: 120px;
          width: 100%; // 确保图片自适应容器
        }
      }
    }
  }
}

调整后的JavaScript #

基础配置保持不变，可按需添加滚动步长优化体验：

$(document).ready(function () {
  $(".partners__slider").slick({
    autoplay: true,
    autoplaySpeed: 3000,
    arrows: true,
    infinite: true,
    slidesToShow: 4,
    slidesToScroll: 1, // 可选，每次滚动1张
    nextArrow: "<img class='slick-next' src='./assets/images/next.png'>",
    prevArrow: "<img class='slick-prev' src='./assets/images/previous.png'>",
  });
});

效果说明 #

修改后，Slick会基于纯净的.partners__slider--item计算4张幻灯片的总宽度，内边距和背景色由内部的.partner-card承担，不会干扰滑块布局，完美匹配设计图效果。

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