如何防止react-slick轮播中心模式下卡片内容互相重叠

问题根因 #

你当前使用固定像素值的centerPadding，小屏场景下300px的两侧预留宽度超过了屏幕可用宽度，会挤压卡片本身的展示宽度，最终导致卡片重叠。

具体修复方案 #

1. 新增响应式配置动态调整centerPadding

react-slick原生支持responsive参数，可根据不同屏幕断点自动切换配置，根据屏幕宽度动态缩小centerPadding的数值：

const settings = {
  dots: true,
  infinite: true,
  speed: 500,
  centerMode: true,
  centerPadding: '300px', // 大屏默认值
  slidesToShow: 1,
  slidesToScroll: 1,
  // 新增响应式配置
  responsive: [
    {
      breakpoint: 1200, // 屏幕宽度小于1200px时生效
      settings: {
        centerPadding: '150px'
      }
    },
    {
      breakpoint: 768, // 屏幕宽度小于768px时生效
      settings: {
        centerPadding: '60px'
      }
    },
    {
      breakpoint: 480, // 屏幕宽度小于480px时生效
      settings: {
        centerPadding: '20px'
      }
    }
  ]
}

2. 给轮播卡片增加固定间距，避免挤压重叠

给每个轮播项（也就是你的TestimonialCard组件）添加固定左右内边距，从样式层面保证卡片之间始终有固定间距，同时设置box-sizing: border-box避免内边距撑宽元素：

/* 全局样式或者组件样式中添加 */
.slick-slide {
  box-sizing: border-box;
  padding: 0 16px; /* 左右16px间距，可自行调整 */
}
/* 可选：保证卡片自适应轮播项宽度 */
.testimonial-card {
  width: 100%;
}

3. 可选优化：限制卡片最小宽度

如果希望极小屏下卡片也不会被压缩到过小，可以给卡片添加min-width样式：

.testimonial-card {
  min-width: 280px; /* 根据你的业务需求调整 */
}

内容的提问来源于stack exchange，提问作者U. Watt