Почему я не могу наложить картинку на slick — slider?

Question

[SanistRay]

Здраствуйте. Мне нужно сделать обычный слайдер, но что бы на сам слайд сверху накладывалась еще и картинка (как еффект).
Я все подготовил, написал код, с помощью позиционирования вроде как правильно расположил (слайд > картинка), но проблема в том что под моей картинкой не видно слайдов, хотя картинка полу - прозрачная.
Решил посмотреть что будет после удаления картинки, в итоге ничего не увидел, просто белый экран. Подскажите, пожалуйста, с чем это может быть связано? Спасибо.

<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 1

[Ankhena]

Так: https://jsfiddle.net/6qxkor0b/

Если вы инициализируете слик на .slider, то слайдами становятся его дочерние элементы, т.е. header-slider будет первым кадром, а slider-bg вторым.
Нужно разобраться со структурой.

Есть еще вопросы по коду:

1. Если какая-то картинка -bg, то почему она контентный img, а не фон в css?
И почему у фона z-index больше чем у всего остального.
Поправить бы логику.

2. Зачем картинкам в слайдере абсолют?

Оформите песочницу с видимой проблемой, чтобы было понятно что на самом деле происходит у вас в коде, а не предположения.

Comments

[SanistRay]

1. Тут мой косяк, ибо только разрабатываю это для себя, что бы понять. -bg это не задний фон, а если так можно сказать, передний. У фона z-index больше чем у слайдера потому что по задумке он должен быть выше, нежели сам слайдер.

2. По поводу absolute картинкам. Я не знал как сделать так что бы была картинка, на нее накладывалась сверху еще одна. Погуглив и поэкспереметрировал нашел данное решение, однако в его правильности все же сомневаюсь, хоть и задача выполнена :)

Но ваш посыл я понял, попробую сделать -bg через CSS. Изначально так и было, не припомню почему решил переделать. Спасибо за ответ)

[Ankhena]

SanistRay, Как-то так https://jsfiddle.net/6qxkor0b/

[SanistRay]

Ankhena, именно то что было нужно, весьма признателен)

Answer 2

[SanistRay]

Сделал так, добился нужно мне результата.

<div class="slider">
            <div class="header-slider">
                <img src="/img/slider/header-1.png" width="1920" height="960px" alt="">
                <img src="/img/slider/header-2.jpg" width="1920" height="960px" alt="">
                <img src="/img/slider/header-1.png" width="1920" height="960px" alt="">
            </div>
            <div class="header-slider-effect">
                
            </div>

.slider {
    position: relative;
}

.header-slider img {
    position: relative;
}

.header-slider-effect {
    background: url(/img/header-bg.png);
    height: 969px;
    bottom: 0px;
    width: 1920px;
    position: absolute;
}

$(document).ready(function() {
    $('.header-slider').slick();
});

Answer 3

[WapSter]

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

Ну или не подключен слайдер или джейквери или стили слайдера. Ссылка нужна для точного ответа. Но самое очевидное код выше.

Comments

[SanistRay]

Все должно быть подключено, слайдер работает корректно если вообще удалить div с картинкой.
Посмотрю что там может быть в .header-slider img, может что - то найду. Спасибо за ответ)