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

【问题标题】：Apply z-index to bespoke js carousel plugin将 z-index 应用于定制的 js 轮播插件
【发布时间】：2017-05-15 23:59:10
【问题描述】：

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

【问题讨论】：

【解决方案1】：

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

.bespoke-active + .bespoke-inactive + .bespoke-inactive 将选择 Active 之后的第二个非活动 img：

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

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

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

【讨论】：

好的，非常感谢！！这些是定制 js 的内置类吗？
@aayushi 我想是的，我正在检查那些 img 并且那些是由您正在使用的 lib 添加的。
嗨@aayushi，我更新了我的答案，我找到了一种更好的方法，如果您希望 img 在 Active 之前也显示完全不透明度，它会更好。由于您使用的 lib 会将这些类动态添加到该部分。应该利用这一点来定位 img 部分。