Slick Slider 如何实现带图文内容的两行滑块布局？

核心问题定位 #

你现在跑出来的图文错位效果，根本原因是用错了Slick的rows参数逻辑：

• 这个参数的作用是让滑块自动把连续的slide按指定行数、每行指定个数排列，如果你只写rows:2不搭配slidesPerRow，Slick会自动把你单个article里的内容拆成两半——上排放图片、下排放文字，直接把原本完整的图文卡片拆碎了。

分步调整方案 #

1. 修正JS配置的参数逻辑 #

根据你需要的效果场景调整配置：

• 如果要实现「移动端小屏时，滑块内容排列成2行，每行放置N个完整图文卡片」的网格效果，把原来的响应式配置替换为：

$('.radio-news-slider').slick({
    infinite: true,
    slidesToShow: 5,
    // 桌面端单排布局的基础配置
    rows: 1,
    slidesPerRow: 1,
    prevArrow: "<i class='slick-prev pull-left fas fa-sort-up' aria-hidden='true'></i>",
    nextArrow: "<i class=' slick-next pull-right fas fa-sort-up' aria-hidden='true'></i>",
    responsive: [
        {
            breakpoint: 576,
            settings: {
                // 小屏下启用2行布局
                rows: 2,
                slidesPerRow: 2, // 每一行放置2个完整卡片
                slidesToShow: 2, // 单屏总展示数=2行*2个=4个卡片
                slidesToScroll: 2
            }
        },
        {
            breakpoint: 768,
            settings: {
                slidesToShow: 3,
                // 平板端恢复单排布局
                rows: 1,
                slidesPerRow: 1
            }
        },
        {
            breakpoint: 992,
            settings: {
                slidesToShow: 4,
                rows: 1,
                slidesPerRow: 1
            }
        }
    ]
});

• 如果要实现「不管什么屏幕尺寸，所有卡片单排排列，仅让每个卡片内部的文字部分按两行排版（第一行标题、第二行简介）」，直接把所有断点的rows设为1、slidesPerRow设为1即可，不需要额外开启2行网格。

2. 补充CSS样式固定结构 #

新增以下样式避免图文错位、实现标准两行文本排版：

.radio-news-slider article {
    display: flex;
    flex-direction: column;
    height: 100%; /* 撑满Slick生成的网格单元格，避免高低不齐 */
}
.radio-news-slider figure {
    margin: 0;
    width: 100%;
}
.radio-news-slider img {
    width: 100%;
    height: auto;
    object-fit: cover;
}
/* 下方文本区的两行排版 */
.radio-news-slider article > a {
    margin-top: 8px;
    font-weight: 600;
    line-height: 1.4;
    /* 标题单行截断 */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.radio-news-slider article p {
    margin-top: 4px;
    line-height: 1.4;
    /* 简介单行截断，和标题凑成固定两行文本高度 */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

常见踩坑提醒 #

• 当rows值大于1时，一定要给每个slide（也就是你的article）设置height:100%，否则Slick生成的网格单元格高度会被内容撑开得参差不齐，出现图片和文字错位对齐的问题。
• 2行及以上布局时，不要用slidesToShow填写网格总卡片数，这个值要和slidesPerRow保持一致，否则会出现滚动时卡片跳位的问题。

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