Apply z-index to bespoke js carousel plugin

Question

I am trying to implement a carousel using bespoke.js. The link to my codepen is 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

Is this what you want? This allowed the next two img to show opacity: 1. .bespoke-active + .bespoke-inactive will select the 1st inactive img after Active

.bespoke-active + .bespoke-inactive + .bespoke-inactive will select the 2nd inactive img after Active:

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

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

UPDATE: A better approach:

Since your js lib will add those class to your section (img container), you can use them to target the img before Active and img after the Active one:

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

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