Javascript 如何在堆栈布局中创建滑块

嗨，我正在尝试创建一个具有以下布局的图像滑块

下面是我的标记

<ul class="stack__slider--list">
  <li class="stack__slider--item">
    <figure></figure>
  </li>
  <li class="stack__slider--item">
    <figure></figure>
  </li>
  <li class="stack__slider--item">
    <figure></figure>
  </li>
  <li class="stack__slider--item">
    <figure></figure>
  </li>
  <li class="stack__slider--item">
    <figure></figure>
  </li>
  <li class="stack__slider--item">
    <figure></figure>
  </li>
</ul>

---

我们的目标是在点击任何一个弹出的图像时实现，而其他图像将处于非活动状态。任何帮助都将不胜感激

我玩过它，并制作了一个叉子，这对你来说应该是一个好的开始。：）

函数交换项（事件，元素）{
elem.parentNode.insertBefore（elem，elem.parentNode.firstChild）；
}
var items=document.querySelectorAll（'.stack\uu slider--item'）；
items.forEach（item=>{
item.addEventListener（'单击'，（e）=>{
swapItem（e，项目）；
});
});
*{
保证金：0；
填充：0；
}
.stack\u滑块--列表{
位置：相对位置；
最小宽度：502px；
高度：402px；
}
.stack\u滑块--项目{
位置：绝对位置；
列表样式类型：无；
宽度：521px；
高度：402px；
背景色：#fff；
过渡：全部。3放松；
填充：20px；
}
.stack\u滑块--项：第n个类型（1）{
左边距：5px；
z指数：6；
}
.stack\u滑块--项：第n个类型（2）{
左边距：75px；
z指数：5；
}
.stack\u滑块--项目：第n个类型（3）{
左边距：145px；
z指数：4；
}
.stack\u滑块--项：第n个类型（4）{
左边距：215px；
z指数：3；
}
.stack\u滑块--项目：第n个类型（5）{
左边距：285px；
z指数：2；
}
.stack\u滑块--项目：第n个类型（6）{
左边距：355px；
z指数：1；
}
.stack\u滑块--项：第n个类型（1）{
变换：比例（0.9）；
}
.stack\u滑块--项：第n个类型（2）{
变换：比例（0.8）；
}
.stack\u滑块--项目：第n个类型（3）{
变换：比例（0.7）；
}
.stack\u滑块--项：第n个类型（4）{
变换：比例（0.6）；
}
.stack\u滑块--项目：第n个类型（5）{
变换：比例（0.5）；
}
.stack\u滑块--项目：第n个类型（6）{
变换：比例（0.4）；
}
.stack\u滑块--项：非（：类型的第一个）{
不透明度：.5；
}
.stack\u滑块--项目按钮{
位置：绝对位置；
底部：10px；
左：10px；
}
.stack__滑块--项目图{
变换原点：右；
高度：402px；
背景#D8D8D8；
边框：1px实心#FFFFFF；
背景尺寸：封面；
背景色：#fff；
背景图像：url（“https://via.placeholder.com/150");
背景位置：中心；
}
.一{
背景：红色；
}
.二{
背景：橙色；
}
.三{
背景：黄色；
}
.4{
背景：紫色；
}
.5{
背景：蓝色；
}













我用它玩了一把，创造了一把叉子，这对你来说应该是一个好的开始。：）


函数交换项（事件，元素）{
elem.parentNode.insertBefore（elem，elem.parentNode.firstChild）；
}
var items=document.querySelectorAll（'.stack\uu slider--item'）；
items.forEach（item=>{
item.addEventListener（'单击'，（e）=>{
swapItem（e，项目）；
});
});
*{
保证金：0；
填充：0；
}
.stack\u滑块--列表{
位置：相对位置；
最小宽度：502px；
高度：402px；
}
.stack\u滑块--项目{
位置：绝对位置；
列表样式类型：无；
宽度：521px；
高度：402px；
背景色：#fff；
过渡：全部。3放松；
填充：20px；
}
.stack\u滑块--项：第n个类型（1）{
左边距：5px；
z指数：6；
}
.stack\u滑块--项：第n个类型（2）{
左边距：75px；
z指数：5；
}
.stack\u滑块--项目：第n个类型（3）{
左边距：145px；
z指数：4；
}
.stack\u滑块--项：第n个类型（4）{
左边距：215px；
z指数：3；
}
.stack\u滑块--项目：第n个类型（5）{
左边距：285px；
z指数：2；
}
.stack\u滑块--项目：第n个类型（6）{
左边距：355px；
z指数：1；
}
.stack\u滑块--项：第n个类型（1）{
变换：比例（0.9）；
}
.stack\u滑块--项：第n个类型（2）{
变换：比例（0.8）；
}
.stack\u滑块--项目：第n个类型（3）{
变换：比例（0.7）；
}
.stack\u滑块--项：第n个类型（4）{
变换：比例（0.6）；
}
.stack\u滑块--项目：第n个类型（5）{
变换：比例（0.5）；
}
.stack\u滑块--项目：第n个类型（6）{
变换：比例（0.4）；
}
.stack\u滑块--项：非（：类型的第一个）{
不透明度：.5；
}
.stack\u滑块--项目按钮{
位置：绝对位置；
底部：10px；
左：10px；
}
.stack__滑块--项目图{
变换原点：右；
高度：402px；
背景#D8D8D8；
边框：1px实心#FFFFFF；
背景尺寸：封面；
背景色：#fff；
背景图像：url（“https://via.placeholder.com/150");
背景位置：中心；
}
.一{
背景：红色；
}
.二{
背景：橙色；
}
.三{
背景：黄色；
}
.4{
背景：紫色；
}
.5{
背景：蓝色；
}













Hi@aslam感谢您的帮助。但是，正如你在我所附的图片中看到的，例如，如果你点击第三张图片，前两张图片会显示在左边，第三张图片会显示在上面，其余的图片会显示在右边。嗨@aslam谢谢你的帮助。但是，正如你在我所附的图片中看到的，例如，如果你点击第三张图片，前两张图片会向左，第三张图片会在顶部，其余的图片会保留在右侧。