Answer the question
In order to leave comments, you need to log in
Why can't I overlay an image on a slick-slider?
Hello. I need to make a normal slider, but so that the picture itself is superimposed on top of the slide itself (as an effect).
I prepared everything, wrote the code, with the help of positioning I sort of positioned it correctly (slide > picture), but the problem is that slides are not visible under my picture, although the picture is semi-transparent.
I decided to see what would happen after deleting the picture, in the end I saw nothing, just a white screen. Prompt, please, with what it can be connected? Thank you.
<div class="slider">
<div class="header-slider">
<img src="/img/slider/header-1.png" width="1920px" height="960px" alt="">
<img src="/img/slider/header-2.jpg" width="1920px" height="960px" alt="">
<img src="/img/slider/header-1.png" width="1920px" height="960px" alt="">
</div>
<div class="slider-bg">
<img src="/img/header-bg.png" width="1920px" height="960px" alt="">
</div>
</div>
.slider {
position: relative;
}
.header-slider img {
position: absolute;
z-index: 1;
}
.slider-bg img {
position: absolute;
z-index: 2;
}
Answer the question
In order to leave comments, you need to log in
So: https://jsfiddle.net/6qxkor0b/
If you initialize a slick on a .slider, then its child elements become slides, i.e. header-slider will be the first frame and slider-bg will be the second.
You need to understand the structure.
There are more questions about the code:
1. If some picture is -bg, then why is it a content img, and not a background in css?
And why does the background have a higher z-index than everything else.
Correct the logic.
2. Why are the images in the slider absolute?
Set up a sandbox with a visible problem so that it is clear what is actually happening in your code, and not assumptions.
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question