如何修改Carousel轮播组件的单屏显示图片数量？

问题描述 #

将轮播代码中的numberOfSlides = 3;改为numberOfSlides = 2;后，单屏仍显示3张图片，需调整以下配置：

必须修改的配置 #

1. 调整单张幻灯片的宽度（CSS） #

原CSS中.slider-scroller-inner .item的flex: 0 0 33.33%;是为单屏3张设计的固定宽度比例，需改为对应2张的比例：

.slider-scroller-inner .item {
    display: inline-block;
    vertical-align: top;
    box-sizing: border-box;
    cursor: grab;
    text-align: center;
    flex: 0 0 50%; /* 替换原33.33%，或用 calc(100% / 2) 更灵活 */
}

这一步是核心，直接决定单屏能容纳的幻灯片数量。

2. 确认JS中的克隆与偏移逻辑 #

你的代码中已将numberOfSlides设为2，克隆前后幻灯片的逻辑（后2张克隆到开头、前2张克隆到末尾）以及初始偏移、切换偏移的计算已自动适配新数量，无需额外修改，但可验证以下关键逻辑：

• 初始偏移：wrapper.style.transform = "translate3d(" + (-slideWidth) * (numberOfSlides) + "px,0,0)"; 已正确计算为-2 * slideWidth，确保初始显示原幻灯片的前2张。
• 指示器切换偏移：changeCurrent函数中的-(slideWidth) * (current + (numberOfSlides-1)) 已自动变为current + 1的倍数，逻辑正确。

可选优化（便于后续修改） #

为了以后修改numberOfSlides时无需手动计算百分比，可使用CSS变量关联JS配置：

1. 在JS中添加一行，将配置值注入CSS变量：

document.documentElement.style.setProperty('--slide-count', numberOfSlides);

2. 修改CSS中的宽度：

.slider-scroller-inner .item {
    /* 其他属性保留 */
    flex: 0 0 calc(100% / var(--slide-count));
}

这样以后只需修改JS中的numberOfSlides值，CSS会自动计算单张幻灯片宽度。

内容的提问来源于stack exchange，提问作者Henrique Schiess Pertussati