如何在Cargo Collective中将Marquee carousel拆分为两行而非一行？

核心修改点 #

原代码中.marquee的white-space: nowrap!important是强制内容单行的关键，需要移除该属性，同时调整内部布局结构实现两行排列，再保持横向滚动效果。

修改后的CSS代码 #

.marquee {
    color: black!important;
    /* 移除强制单行的属性 */
    /* white-space: nowrap!important; */
    overflow: hidden;
    position: relative;
    /* 确保容器高度能容纳两行图片 */
    height: auto;
}

.marquee-content {
    /* 用Grid实现两行布局，每行4个图片（可按需调整数量） */
    display: grid;
    grid-template-columns: repeat(4, 250px); /* 自定义图片宽度 */
    grid-template-rows: repeat(2, auto);
    gap: 0; /* 去掉间距保持紧凑 */
    /* 设置足够宽的宽度，让内容能横向滚动 */
    width: calc(250px * 8); /* 8个图片总宽度 */
    /* 自定义滚动动画，速度可调整 */
    animation: marquee-scroll 20s linear infinite;
}

/* 横向滚动动画逻辑 */
@keyframes marquee-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); } /* 滚动半程实现循环效果 */
}

/* 图片容器适配样式 */
.grid-col {
    width: 250px;
    height: auto;
}

修改后的HTML结构 #

<div class="marquee">
    <!-- 新增外层容器包裹内容，用于控制滚动 -->
    <div class="marquee-content">
        <div grid-col="x9" grid-pad="0">{image 1}</div>
        <div grid-col="x9" grid-pad="0">{image 2}</div>
        <div grid-col="x9" grid-pad="0">{image 3}</div>
        <div grid-col="x9" grid-pad="0">{image 4}</div>
        <div grid-col="x9" grid-pad="0">{image 5}</div>
        <div grid-col="x9" grid-pad="0">{image 6}</div>
        <div grid-col="x9" grid-pad="0">{image 7}</div>
        <div grid-col="x9" grid-pad="0">{image 8}</div>
    </div>
</div>

补充说明 #

• 若原代码的speed="-10"是自定义JS控制滚动，需调整JS逻辑，针对.marquee-content容器做translateX偏移计算，替换原单行滚动逻辑。
• 可根据图片实际尺寸调整grid-template-columns和.marquee-content的宽度，保证两行布局对齐。
• 要实现无缝循环，可复制一份.marquee-content的内容追加到后面，将动画滚动距离改为100%。

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