Форум программистов
 
Контакты: о проблемах с регистрацией, почтой и по другим вопросам пишите сюда - alarforum@yandex.ru, проверяйте папку спам! Обязательно пройдите активизацию e-mail.

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

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

Ответ
 
Опции темы
Старый 15.04.2018, 16:26   #1
uzi_no_uzi
Новичок
 
Регистрация: 15.04.2018
Сообщений: 1
Репутация: 10
По умолчанию Не адаптируется 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 вне форума   Ответить с цитированием
Ответ

Опции темы

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.

Быстрый переход

Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
на айфоне 4s не адаптируется нижний блок (с картинкой и текстом справа) и совсем не виден подвал YouAre HTML и CSS 1 19.01.2018 20:34
Проблемы с каруселью Slick Роман Корчовський JavaScript, Ajax 1 29.06.2017 00:28
Slider Control electronic255 Помощь студентам 0 25.11.2012 23:08
ProgressBar как Slider или Slider как ProgressBar coNsept Общие вопросы .NET 5 08.03.2012 17:00


19:19.


Powered by vBulletin® Version 3.8.8 Beta 2
Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.

RusProfile.ru


Справочник российских юридических лиц и организаций.
Проекты отопления, пеллетные котлы, бойлеры, радиаторы
интернет магазин respective.ru