Slick Slider z-index issues

171
March 13, 2018, at 5:43 PM

I'm using slick slider and have created the following custom layout with it.

And what I'm attempting to do now is to put text and buttons on top of the slides that users can high light or click. Upon searching for this issue, I came across this post which I followed and added

position: relative;

To both the main class of the slide my_slider and the individual slides slick-slide

However, this didn't work for me. So what I did was add a z-index:1 to the slick-slide class and z-index: 2; to the button. But this didn't work either. I'm not really sure what I'm doing wrong.

I've recreated the issue in a fiddle https://jsfiddle.net/kf6ohz98/3/

Answer 1

Until this feature request is added, you can resort to the below solution.

The button click is not working because of the below lines of code in 'slick.css'.

.slick-slider .slick-track, .slick-slider .slick-list {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

You may remove it in the actual file or override it in your css file.

Note that the style is again getting added in .slick-track through JS. You need to consider tweaking the JS, else use !important to override it.

Similarly, for highlighting the text, you need to remove the below styles from .slick-slider{...}

-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

Hope this helps.

READ ALSO
Like/Unlike Button with jQuery in a Django App

Like/Unlike Button with jQuery in a Django App

I'm trying to create a Like/Unlike button with jQuery! Here's what I did,

131
<input type="file> limit selectable files by name

<input type="file> limit selectable files by name

I want to make an upload table where each file has its own upload ButtonTo make it easier for user i want to restrict the choosable files by name similar to how the accept tag limits the type

118
Jquery .slice chars from array?

Jquery .slice chars from array?

obj is a array that contains youtube linksIt includes around 32 youtube links if you are at youtube

137
Sending changes to a sql Database without refreshing the page ASP.net core 2.0

Sending changes to a sql Database without refreshing the page ASP.net core 2.0

I have a bunch of draggable divs and i need to save their positions in a sql database when they are dropped, but i dont want it to refresh the pageIm thinking of adding some ajax call when the div is dropped but i have no idea what that ajax call would look like

110