我想给我的网站做一个类似下图的卡片轮播动画：

目前轮播的基础功能都正常，但有个问题——卡片只在单侧显示，没法实现预期的双侧都有卡片的效果。我原本以为两侧都会有卡片排布，但现在只有一侧能看到，实在找不到代码里的问题出在哪儿。

以下是我用到的JavaScript、HTML和CSS代码片段：

JavaScript 代码 #

let items = document.querySelectorAll('.slider .item');
let next =  document.getElementById('next');
let prev = document.getElementById('prev');

let active = 3;
function loadshow(){
    let stt = 0;
    items[active].style.transform = `none`;
    // 原代码内容未完整提供，以上为已给出的片段
}

HTML 代码片段 #

<!-- 此处为轮播相关的HTML结构 -->

CSS 代码片段 #

/* 此处为轮播相关的CSS样式 */

我先给你列几个可能导致这个问题的常见方向，你可以先自查下：

• 变换逻辑不完整：大概率是loadshow函数里只处理了active元素某一侧的卡片定位（比如只算了右侧的偏移），没给另一侧的卡片设置对应的transform规则，导致左侧没有卡片被正确摆放。
• 元素遍历范围错误：如果循环处理items的时候，只遍历了active之后的元素，没处理active之前的那些，自然左侧就不会有显示的卡片。
• 层级遮挡问题：要是左侧卡片的z-index设置得比其他元素低，可能会被遮挡住，看起来像是没显示出来。

如果能把完整的代码贴出来，我就能帮你更精准地找到问题所在啦！

备注：内容来源于stack exchange，提问作者demosewa