1

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 ?
Arpit
  • 448
  • 8
  • 26
Aayushi
  • 1,736
  • 1
  • 26
  • 48

1 Answers1

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

Community
  • 1
  • 1
Dalin Huang
  • 11,212
  • 5
  • 32
  • 49
  • yes, thanks a lot !! are these inbuilt classes of bespoke js? – Aayushi May 15 '17 at 15:52
  • @aayushi I think so, I'm inspect those img and those are added by the lib you are using. – Dalin Huang May 15 '17 at 15:52
  • Hi @aayushi, I updated my answer, I found a better approach, it will deal better if you want img before the Active one to show full opacity as well. Since the lib you are using will add those class dynamically to the section. Should take advantage of that to target the img section. – Dalin Huang May 15 '17 at 16:00