|
|
Регистрация Восстановить пароль |
Регистрация | Задать вопрос |
Заплачу за решение |
Новые сообщения |
Сообщения за день |
Расширенный поиск |
Правила |
Всё прочитано |
|
Опции темы | Поиск в этой теме |
15.04.2018, 15:26 | #1 |
Новичок
Джуниор
Регистрация: 15.04.2018
Сообщений: 1
|
Не адаптируется slick slider
Не могу понять как сделать адаптивным slick.
Настройки: [JS]$(document).ready(function(){ $('.head-slider__slider').slick({ dots: true, infinite: true, speed: 1000, }); });[/JS] [CSS].head-slider { display: flex; align-items: center; min-height: 900px; background: url(../img/sliders/slide_img.jpg); background-size: cover; background-position: fixed; .head-slider__slider { width: 100%; .slider__slide { display: flex; flex-direction: column; justify-content: space-around; min-height: 500px; .slide__slide-header { h2 { font-size: 7rem; font-family: @FfontRaleway; font-weight: @WfontSemiBold; color: @whiteColor; } } .slide__slide-description { font-size: 5rem; font-family: @FfontRaleway; font-weight: @WfontLight; color: @whiteColor; } .slide__slide-buttons { a { .lightButtons(@whiteColor); margin-right: 1%; } } } } }[/CSS] Код HTML:
<section class="head-slider"> <div class="container"> <div class="head-slider__slider"> <div class="slider__slide"> <div class="slide__slide-header"> <h2>Expire</h2> </div> <div class="slide__slide-description"> <p>Professionaly designed, carefully made for your enjoyement</p> </div> <div class="slide__slide-buttons"> <a href="#">Explore</a> <a href="#">Learn more</a> </div> </div> <!--slide-end--> <div class="slider__slide"> <div class="slide__slide-header"> <h2>Expire</h2> <object data="" type=""></object> </div> <div class="slide__slide-description"> <p>Professionaly designed, carefully made for your enjoyement</p> </div> <div class="slide__slide-buttons"> <a href="#">Explore</a> <a href="#">Learn more</a> </div> </div> <!--slide-end--> <div class="slider__slide"> <div class="slide__slide-header"> <h2>Expire</h2> <object data="" type=""></object> </div> <div class="slide__slide-description"> <p>Professionaly designed, carefully made for your enjoyement</p> </div> <div class="slide__slide-buttons"> <a href="#">Explore</a> <a href="#">Learn more</a> </div> </div> <!--slide-end--> <div class="slider__slide"> <div class="slide__slide-header"> <h2>Expire</h2> <object data="" type=""></object> </div> <div class="slide__slide-description"> <p>Professionaly designed, carefully made for your enjoyement</p> </div> <div class="slide__slide-buttons"> <a href="#">Explore</a> <a href="#">Learn more</a> </div> </div> <!--slide-end--> </div> </div> </section> https://uzinouzi.github.io/testtemplate/ - Ссылка на верстку с проблемой. |
Похожие темы | ||||
Тема | Автор | Раздел | Ответов | Последнее сообщение |
на айфоне 4s не адаптируется нижний блок (с картинкой и текстом справа) и совсем не виден подвал | YouAre | HTML и CSS | 1 | 19.01.2018 19:34 |
Проблемы с каруселью Slick | Роман Корчовський | JavaScript, Ajax | 1 | 28.06.2017 23:28 |
Slider Control | electronic255 | Помощь студентам | 0 | 25.11.2012 23:08 |
ProgressBar как Slider или Slider как ProgressBar | coNsept | Общие вопросы .NET | 5 | 08.03.2012 17:00 |