Unbounce平台下使用CSS修复Slick轮播图片挤压、网格间距异常问题

问题根因 #

• 轮播图片设置了固定像素宽度（桌面端890px、移动端290px），同时配置了height:100%，当外层容器宽度被Unbounce默认布局限制时，图片会被强制拉伸/挤压变形
• Slick外层容器#slider无宽度限制，无法实现占页面一半宽度的需求
• Slick初始化配置中同一个480px断点重复写了3次，会导致配置冲突无法正常生效

修复方案 #

1. 调整CSS样式

在原有样式基础上，新增外层容器宽度规则，修改图片自适应逻辑，替换对应部分代码即可：

/* 新增：轮播外层容器宽度控制 */
#slider {
  width: 50%; /* 桌面端占页面一半宽度，可按需调整比例 */
  margin: 0 auto; /* 可选：设置轮播居中展示 */
}

/* 替换原桌面端图片样式 */
.slick-slide img.desk {
  width: 100%; /* 自适应容器宽度 */
  height: auto; /* 高度随宽度等比缩放，不会变形 */
  max-width: 890px; /* 保留最大宽度限制，避免图片过大失真 */
  display: block;    
  margin: 0 auto;
}

/* 替换原移动端图片样式 */
.slick-slide img.mob {
  width: 100%;
  height: auto;
  max-width: 290px;
  display: none;
  margin: 0 auto;
}

/* 修改移动端媒体查询，补充容器宽度适配 */
@media only screen and (max-width: 600px) {
  #slider {
    width: 100%; /* 移动端占满可用宽度，可按需调整 */
  }
  .slick-slide img.desk {
    display: none;
  }
  .slick-slide img.mob {
    display: block;
  }
  .slick-dots{margin-top: 25px;}
  .slick-prev.slick-arrow{bottom: 3.6em !important; left: 40% !important; top: auto;}
  .slick-next.slick-arrow{bottom: 3.6em !important; right: 40% !important; top: auto;}
}

2. 修正Slick初始化配置

删除重复的断点配置，保留一份480px断点规则即可，避免配置冲突：

$('#slider').slick({
    autoplay: true,
    autoplaySpeed: 4000,
    dots:false,
    arrows:true,
    cssEase: 'linear',
    pauseOnHover: false,
    slidesToShow: 1,
    slidesToScroll: 1,
    responsive: [
      {
        breakpoint: 480,
        settings: {
          slidesToShow: 1,
          slidesToScroll: 1,
          infinite: true,
          arrows:false,
          dots:true
        }
      }
    ]  
});

3. Unbounce嵌入适配（可选）

如果修改后仍出现箭头/内容被截断的问题，给Unbounce中存放自定义代码的容器元素加上overflow: visible样式即可。

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