@osimone

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

Подскажите пожалуйста, возможно ли сделать слайдер фонового изображения при помощи slick slider?
Гугл не помогает( В документации сказано что картинки нужно поместить в div блок. Но как быть с фоновыми изображениями?5eb6f114e7fb0478030184.png
хочется сделать такой слайдер
  • Вопрос задан
  • 230 просмотров
Решения вопроса 2
duboloms
@duboloms
Люблю есть дубы с кетчупом. Веб-разработчик.
Помести в div блок, задай position: absolute;, а родительскому блоку задай position: relative; (relative нужен чтобы картинки не вылезли за родительский блок)
div с картинками растяни на весь экран width: 100%; height: 100%;
И все!
Ответ написан
@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;        
        }


5eb7cdf516683191659653.png
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы