Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 15.04.2018, 15:26   #1
uzi_no_uzi
Новичок
Джуниор
 
Регистрация: 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>
Попробовал отключить display: flex для .head-slider, это помогло, слайдер стал адаптивным, но в таком случае слайдер находится не по середине секции, а это то, для чего я и использовал flex'ы.

https://uzinouzi.github.io/testtemplate/ - Ссылка на верстку с проблемой.
uzi_no_uzi вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
на айфоне 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