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

Apply z-index to bespoke js carousel plugin

我正在尝试使用 bespoke.js 实现轮播。我的 codepen 的 link 是 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 ?

这是你想要的吗？这允许接下来的两个 img 显示 opacity: 1。 .bespoke-active + .bespoke-inactive 将 select 第一个非活动 img 在活动

之后

.bespoke-active + .bespoke-inactive + .bespoke-inactive 将 select 活动后的第二个非活动 img:

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

LINK: https://codepen.io/hdl881127/pen/jmKpMB

更新：更好的方法：

由于您的 js 库会将那些 class 添加到您的部分（img 容器），您可以使用它们来定位 Active 之前的 img 和 Active 之后的 img：

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

LINK: https://codepen.io/hdl881127/pen/QvxBxM