S
S
SanistRay2020-07-20 15:53:02
css
SanistRay, 2020-07-20 15:53:02

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

2 answer(s)
A
Ankhena, 2020-07-20
@SanistRay

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.

W
WapSter, 2020-07-20
@wapster92

.header-slider img {
    position: absolute;
    z-index: 1;
}

Well, either the slider or jekveri or slider styles are not connected. A link is needed for an accurate answer. But the most obvious code is above.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question