Можно ли из фоновых бэкграундов сделать slick slider?

Question

[osimone]

Подскажите пожалуйста, возможно ли сделать слайдер фонового изображения при помощи slick slider?
Гугл не помогает( В документации сказано что картинки нужно поместить в div блок. Но как быть с фоновыми изображениями?
хочется сделать такой слайдер

Comments

[n1ksON]

Так а зачем картинку помещать на фон? Разве нельзя картинке задать отрицательный z-index?

[Ankhena]

Слайды это блоки (div или li или что вам нравится) и им задавайте фон.
В чем именно возникает проблема?

[osimone]

Ankhena, изображение не растягивается по высоте, почему то становится бэкграундом для текста

<div class="carousel">
        <div class="banner_slider_wrap">
            <div class="banner_slider">
                <div class="slide-1">
                    <h2 class="title">
                        Множество оригинальных,
                            непохожих на европейские
                            модели рюкзаков
                    </h2>
                </div>

                <div class="slide-2">
                    <h2 class="title">
                        Множество оригинальных,
                            непохожих на европейские
                            модели рюкзаков
                    </h2>
                </div>
                <div class="slide-3">
                    <h2 class="title">
                        Множество оригинальных,
                            непохожих на европейские
                            модели рюкзаков
                    </h2>
                </div>
                <div class="slide-4">
                    <h2 class="title">
                        Множество оригинальных,
                            непохожих на европейские
                            модели рюкзаков
                    </h2>
                </div>
            </div>
        </div>
    </div>

.carousel {
    .banner_slider {
        width: 100%;
        height: 100%;
        .slide-1 {
            background: url(../../img/Background2.png) center (center/cover) no-repeat;
            width: 100%;
            height: 100%;
        }
        .slide-2 {
            background: url(../../img/Background2.2.jpg.png) center (center/cover) no-repeat;
            width: 100%;
            height: 100%;
        }
        .slide-3 {
            background: url(../../img/Background2.3.png) center (center/cover) no-repeat;
            width: 100%;
            height: 100%;
        }
        .slide-4 {
            background: url(../../img/Background2.4.png) center (center/cover) no-repeat;
            width: 100%;
            height: 100%;
        }
         .slick-next {
            background: url(../../icons/knopka_vpravo_139.png) center (center/cover) no-repeat;
            font-size: 0px;
            opacity: 0.6;
            background-size: 80%;
            border: 0px;
            width: 118px;
            height: 108px;
            position: absolute;
            right: 250px;
            top: 38%;
            margin-top: -73px;      
            z-index: 10;      
        }
        .slick-prev {
            background: url(../../icons/knopka_vlevo_138.png) center (center/cover) no-repeat;
            font-size: 0px;
            background-size: 80%;
            opacity: 0.6;
            border: 0px;
            width: 118px;
            height: 108px;
            position: absolute;
            left: 250px;
            top: 38%;
            margin-top: -70px;    
            z-index: 10;        
        }

[Ankhena]

osimone, Люблю неполные куски кода и стилей.
Было бы проще, если бы вы сделали рабочую песочницу на jsfiddle.net или codepen.

Но попробую погадать по неполному куску.
Для каждого слайда вы задаете height: 100%; (Кстати, зачем вы это пишете 4 раза? А если слайдов будет сотня?)
И его родителю .banner_slider тоже высоту 100%.
Но возникает вопрос, а какая высота у banner_slider_wrap? От чего считать %?

Но может, всё и не так.
Будет песочница с видимой проблемой будет и точный ответ.

[osimone]

Ankhena, сам справился) спасибо, высоту не в % написал, а в пикселях 950пкс как и сама высота изображения

[Ankhena]

osimone, логично

Answer 1

[Дуболом Одноклеточный]

Помести в div блок, задай position: absolute;, а родительскому блоку задай position: relative; (relative нужен чтобы картинки не вылезли за родительский блок)
div с картинками растяни на весь экран width: 100%; height: 100%;
И все!

Comments

[osimone]

пробовал так сделать не помогло, бэкграунд не растягивается по высоте больше, чем размер текста (то есть изображение почему то становится просто бэкграундом для текста)
ниже прикрепил код, может там сможете найти какие то ошибки? повторяю пробовал добавлять позиции релатив/абсолют не помогло

Answer 2

[osimone]

изображение не растягивается по высоте, почему то становится бэкграундом для текста

<div class="carousel">
        <div class="banner_slider_wrap">
            <div class="banner_slider">
                <div class="slide-1">
                    <h2 class="title">
                        Множество оригинальных,
                            непохожих на европейские
                            модели рюкзаков
                    </h2>
                </div>

                <div class="slide-2">
                    <h2 class="title">
                        Множество оригинальных,
                            непохожих на европейские
                            модели рюкзаков
                    </h2>
                </div>
                <div class="slide-3">
                    <h2 class="title">
                        Множество оригинальных,
                            непохожих на европейские
                            модели рюкзаков
                    </h2>
                </div>
                <div class="slide-4">
                    <h2 class="title">
                        Множество оригинальных,
                            непохожих на европейские
                            модели рюкзаков
                    </h2>
                </div>
            </div>
        </div>
    </div>

.carousel {
    .banner_slider {
        width: 100%;
        height: 100%;
        .slide-1 {
            background: url(../../img/Background2.png) center (center/cover) no-repeat;
            width: 100%;
            height: 100%;
        }
        .slide-2 {
            background: url(../../img/Background2.2.jpg.png) center (center/cover) no-repeat;
            width: 100%;
            height: 100%;
        }
        .slide-3 {
            background: url(../../img/Background2.3.png) center (center/cover) no-repeat;
            width: 100%;
            height: 100%;
        }
        .slide-4 {
            background: url(../../img/Background2.4.png) center (center/cover) no-repeat;
            width: 100%;
            height: 100%;
        }
         .slick-next {
            background: url(../../icons/knopka_vpravo_139.png) center (center/cover) no-repeat;
            font-size: 0px;
            opacity: 0.6;
            background-size: 80%;
            border: 0px;
            width: 118px;
            height: 108px;
            position: absolute;
            right: 250px;
            top: 38%;
            margin-top: -73px;      
            z-index: 10;      
        }
        .slick-prev {
            background: url(../../icons/knopka_vlevo_138.png) center (center/cover) no-repeat;
            font-size: 0px;
            background-size: 80%;
            opacity: 0.6;
            border: 0px;
            width: 118px;
            height: 108px;
            position: absolute;
            left: 250px;
            top: 38%;
            margin-top: -70px;    
            z-index: 10;        
        }