html - 将 z-index 应用于定制的 js 轮播插件

Question

我正在尝试使用 bespoke.js 实现轮播。我的代码笔的链接是 Link .

How do I apply z-index to the slides, which are not in focus? 
If I do z-index:1, then the whole orientation changes so, What should be done ?

Answer 1

这是你想要的吗？这允许接下来的两个 img 显示 opacity: 1。 .bespoke-active + .bespoke-inactive 会选择Active之后的第一个inactive img

.bespoke-active + .bespoke-inactive + .bespoke-inactive 将选择 Active 之后的第二个非事件 img:

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

链接:https://codepen.io/hdl881127/pen/jmKpMB

更新:更好的方法:

由于您的 js 库会将这些类添加到您的部分(img 容器)，您可以使用它们来定位 Active 之前的 img 和 Active 之后的 img:

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

链接:https://codepen.io/hdl881127/pen/QvxBxM