Html 将z索引应用于定制js旋转木马插件

我正在尝试使用bespoke.js实现一个旋转木马。我的代码笔的链接是

---

这是你想要的吗？这允许接下来的两个img显示

不透明度：1

。

.bespoke active+。bespoke inactive

将选择激活后的第一个非激活img

.bespoke active+。bespoke inactive+。bespoke inactive

将选择激活后的第二个非激活img：

.bespoke-active + .bespoke-inactive,
.bespoke-active + .bespoke-inactive + .bespoke-inactive{
   opacity: 1;
}

链接：

更新：更好的方法： 由于您的js库会将这些类添加到您的节（img容器），因此您可以使用它们在活动之前定位img，在活动之后定位img：

.bespoke-before-1,
.bespoke-before-2,
.bespoke-after-1,
.bespoke-after-2 {
  opacity: 1;
}

---

链接：

据我所知，您只需要活动幻灯片可见，其他幻灯片隐藏？不隐藏，背景色与不在中间的幻灯片重叠。我只是想让你知道correct@aayushi设置位置：相对于父级，然后在子级设置z索引。你能给我演示一下吗？因为当我做同样的事情时，一切都会消失@DanielH@aayushi好的，你所有的代码都在代码笔链接上吗？是的，非常感谢！！这些是定制js的内置类吗？@Ayushi我想是的，我正在检查这些img以及您正在使用的库添加的img。嗨@Ayushi，我更新了我的答案，我找到了一个更好的方法，如果您希望img在活动之前也显示完全不透明度，它会处理得更好。因为您正在使用的库将动态地将这些类添加到节中。应该利用这一点来瞄准img部分。

.bespoke-before-1,
.bespoke-before-2,
.bespoke-after-1,
.bespoke-after-2 {
  opacity: 1;
}