React Slick滑块下方无法显示随动文本的技术咨询

问题根源 #

1. 类名冲突：你把自定义幻灯片的类名设成了slick-list，但这个是React Slick组件自带的容器类名，会和组件内部样式冲突，导致布局异常。
2. 固定高度截断内容：你给.slick-list设置了height:20vh，这个高度只够显示图片，下方的文本被截断隐藏了。

修正后的代码 #

React组件代码

const Row = () => {
    var settings = {
        dots: false,
        autoplay: false,
        infinite: false,
        speed: 500,
        slidesToShow: 3,
        slidesToScroll: 1,
        arrows: false,
        adaptiveHeight: true,
    };
    return (
        <Slider {...settings} >
            {/* 把类名改成slide-item，避免和组件自带类冲突 */}
            <div className="slide-item">
                <img src={img1} alt="幻灯片1" />
                <h2>ABCXYZ</h2>
            </div>
            <div className="slide-item">
                <img src={img1} alt="幻灯片2" />
                <h2>DEFUVW</h2>
            </div>
            <div className="slide-item">
                <img src={img1} alt="幻灯片3" />
                <h2>GHIJKL</h2>
            </div>
            <div className="slide-item">
                <img src={img1} alt="幻灯片4" />
                <h2>MNOPQR</h2>
            </div>
            <div className="slide-item">
                <img src={img1} alt="幻灯片5" />
                <h2>STUVWX</h2>
            </div>
        </Slider>
    )
}

修正后的CSS代码

/* 组件自带的slick-slide样式保留，调整间距 */
.slick-slide {
  margin: 0 6px;
  margin-left: 15px;
}

/* 移除组件自带slick-list的固定高度，避免截断内容 */
.slick-list {
  margin: 0 -6px;
  border-radius: 10px;
  /* 去掉height:20vh */
}

/* 自定义幻灯片容器样式，控制内部布局 */
.slide-item {
  /* 让图片和文本垂直排列，可根据需求调整 */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.slide-item img {
  /* 给图片设置最大宽度，避免溢出 */
  max-width: 100%;
  border-radius: 10px; /* 保持圆角效果 */
}

.slide-item h2 {
  margin-top: 8px;
  font-size: 1rem; /* 根据需求调整字号 */
}

额外说明 #

• adaptiveHeight: true会让滑块高度自动适配当前幻灯片的最高内容，确保所有文本都能正常显示。
• 给img添加alt属性是符合网页无障碍规范的好习惯。

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