Slick slaider как сделать слайдер на 100% по экрану и чтоб внутри него был контент?

Question

[chulacyber]

Доброго дня, взял макет для обучению верстке, столкнулся с проблемой слайдера, а именно я не понимаю как сделать слайдер на 100vh и 100% ширины и чтоб при этом в нутри был основной контент? Фото прикреплю для понимания :D

<div class="slider">
	<header class="main-header">
		<div class="container">
			<div class="nav-section">

				<div class="logo">
					<img src="img/1.png" alt="">
					<h1>Waxom</h1>
				</div>

				<div class="navigation">
					<nav>
						<ul>
							<li><a href="#">Home</a></li>
							<li><a href="#">About Us</a></li>
							<li><a href="#">Portfoli</a></li>
							<li><a href="#">Features</a></li>
							<li><a href="#">Blog</a></li>
							<li><a href="#">Pricing</a></li>
							<li><a href="#">Shortcodes</a></li>
							<li><a href="#">Contact</a></li>
							<li><a href="#"><img src="img/Icon-cart.png" alt=""></a></li>
							<li><a href="#"><img src="img/search-cart.png" alt=""></a></li>
						</ul>
					</nav>
				</div>
			</div>
		</div>

		<div class="text-button">
			<p>Unique and Modern Design</p>
			<h1>Portfolio PSD Template</h1>
			<p>Nam liber tempor cum soluta nobis eleifend option congue nihil imper-<br>diet doming id quod mazim placerat facer possim assum</p>
			<a href="#" class="button btn1">Get started</a>
		</div><b></b>	
	</header>
</div>

Answer 1

[Andrew]

Почему у вас в "слайдере" хэдэр, меню и прочее?
или у вас в каждом слайде меню?
Обычно, слайдер использует одинаковые элементы(с одним классом), для пролистывания. Т.е. что-то типа:

<div class="slider">
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
</div>

Конкретно здесь, я бы делал первый(верхний блок со слайдами), как я выше написал. Меню - фиксд.

Comments

[chulacyber]

<div class="slider">
				<div class="slide"><img src="../img/2.png" alt=""></div>
				<div class="slide"><img src="../img/im1.jpg" alt=""></div>
				</div>
	<header class="main-header">
<p>Header content...</p>

По какой то причине я не могу понять как теперь сделать так, чтоб мое меню и содержимое хедера, было поверх слайдера и чтоб тот работал как нужно, сейчас есть горизонтальный скролл но это из-за стрелок и нижнее меню кнопок вылазиет за 100vh*, с этим я разберусь, но вот как оборазить то что мне нужно?

.main-header
	height: 100vh
	background-size: cover
	background-position: top
	position: fixed

.slider
	z-index: 100

.slider img
	height: 100vh

[Егор Живагин]

chulacyber, прибавьте к стилям хэдера

.main-header{
top: 0px;
z-index: 1;
}

[chulacyber]

Егор Живагин, Решил проблему другим путем, дал слайдеру позицию релатив, а хедер закинул в него абсолютно)
Спасибо ребята