Center Mode Z Index

center mode z-indexing stays sequential

I am attempting to use center mode with a box shadow but due to the zindexing of the slides, I cannot get the center slide in-front of all slides. I am attempting to create this carousel.

====================================================================

[ paste your jsfiddle link here ]

use this jsfiddle to reproduce my bug: http://jsfiddle.net/zL17w28f/3/

====================================================================

Steps to reproduce the problem

1. Set centerMode: true and slidesToShow: 3
2. Add a box-shadow to .slick-slide

====================================================================

What is the expected behaviour?

That in center mode, the z-index of the center slide is the highest.

====================================================================

What is observed behaviour?

When in center mode, z index ordering stays sequential.

====================================================================

More Details

• Which browsers/versions does it happen on? doesn’t matter
• Which jQuery/Slick version are you using? https://github.com/bodrovis/jquery-slick-rails
• Did this work before? No

[hjelmeir]

I was able to hack this with css.

// Need position relative and a base z index
.slick-slide {
    position: relative;
    z-index: 6;
}
// Set center to high zindex
.slick-center {
    z-index: 999; // or any high #
}
// Target slide after center to keep stacking
.slick-center + .slick-slide {
    z-index: 8;
}

[EstiT]

I know this post is for almost 3years ago. but if you add this class to your project, I think your problem will solve

.slick-slide {
    position: relative;
    z-index: 1;
}

.slick-active {
    transform: scale(1.2);
    z-index: 2;
}

I had to add improtant to get it to work. Also, .slick-active made multiple images larger, not just the center. I ended up using:

.slick-center {
    transform: scale(1.2);
    z-index: 2 !important;
}