Пытался сделать слайдером фон с переменными картинками. В общем, для одного блока фон работает, а для header'а - нет. Не до конца понимаю как исправить
P.S. Это мой первый опыт в html и т. д. , поэтому, возможно, не стоило пока лезть в эти слайдеры, но просто хочется сделать красиво:)
$(document).ready(function() {
$('.slider').slick({
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 5000,
infinite: true,
speed: 1000,
fade: true,
})
})
* {
box-sizing: border-box;
}
.slider_item_1.slick-slide {
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.slider_item_2.slick-slide {
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.slider_item_3.slick-slide {
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.slider_item_4.slick-slide {
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
h1 {
font-family: 'Mag_blackc';
padding-top: 272px;
margin-top: 0;
color: rgb(0, 0, 0);
font-size: 40px;
text-transform: uppercase;
letter-spacing: 3px;
}
.container {
width: 1250px;
max-width: 100%;
margin: 0 auto;
}
header .container {
justify-content: space-between;
display: flex;
margin-top: 35px;
width: 100%;
padding: 0 100px;
}
nav li {
display: inline;
margin: 0 20px;
font-family: "Deledda";
font-size: 21px;
color: rgb(0, 0, 0);
}
a {
text-decoration: unset;
}
nav li a {
color: inherit;
}
.header_contacts a {
position: relative;
top: 21px;
color: rgb(0, 0, 0);
font-family: "Deledda";
font-size: 18px;
}
.logo span {
font-family: 'Mag_blackc';
font-size: 29px;
letter-spacing: 1px;
text-transform: uppercase;
position: relative;
bottom: 14px;
color: rgb(0, 0, 0);
}
header {
position: relative;
margin: auto;
left: 0;
right: 0;
top: 0;
}
body {
margin: 0;
}
.container p {
font-weight: bolder;
color: rgb(0, 0, 0);
font-family: "Deledda";
font-size: 23px;
text-transform: uppercase;
padding-top: 50px;
padding-bottom: 100px;
letter-spacing: 1.5px;
}
/* Слайдер */
.slick-slider {}
.slick-list {
overflow: hidden;
}
.slick-track {
display: flex;
}
.slick-slide {}
.slick-slide.slick-active {}
.slick-slide.slick-current {}
.slick-slide.slick-center {}
.slick-slider.slick-initialized {}
.slick-slider.slick-dotted {}
.slick-slide.slick-cloned {}
.slick-arrow {
position: absolute;
top: 50%;
z-index: 10;
font-size: 0;
width: 50px;
height: 50px;
border: 0;
}
.slick-arrow.slick-prev {}
.slick-arrow.slick-next {}
.slick-arrow.slick-disabled {}
.slick-dots {}
.slick-dots li {}
.slick-dots li button {}
.slick-dots li.slick-active {}
.slider {
position: relative;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" integrity="sha512-yHknP1/AwR+yx26cB1y0cjvQUMvEa2PFzt1c9LlS4pRQ5NOTZFWbhBig+X9G9eYW/8m0/4OXNx8pxJ6z57x0dw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<header>
<div class="container">
<div class="logo">
<img src="img/logo1.png" alt="Планета" width="52x" height="52px">
<span>Планета</span>
</div>
<nav>
<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">О компании</a></li>
<li><a href="#">Отзывы</a></li>
<li><a href="#">Контакты</a></li>
</ul>
</nav>
<div class="header_contacts">
<a href="#">8 (800) 555-35-35</a>
</div>
</div>
<div class="slider">
<div class="slider_item_1" style="background-image: url('https://i.imgur.com/VTs8jeb.jpeg');">
<div class="container">
<h1>
Наполните жизнь красками<br> с лучшими турами по России
</h1>
<p>
Скидка на заказ первого тура!
</p>
</div>
</div>
<div class="slider_item_2" style="background-image: url('https://i.imgur.com/ic3u8fY.jpeg');">
<div class="container">
<h1>
Наполните жизнь красками<br> с лучшими турами по России
</h1>
<p>
Скидка на заказ первого тура!
</p>
</div>
</div>
<div class="slider_item_3" style="background-image: url('https://i.imgur.com/ic3u8fY.jpeg');">
<div class="container">
<h1>
Наполните жизнь красками<br> с лучшими турами по России
</h1>
<p>
Скидка на заказ первого тура!
</p>
</div>
</div>
<div class="slider_item_4" style="background-image: url('https://i.imgur.com/ic3u8fY.jpeg');">
<div class="container">
<h1>
Наполните жизнь красками<br> с лучшими турами по России
</h1>
<p>
Скидка на заказ первого тура!
</p>
</div>
</div>
</div>
</header>
<footer>
</footer>
position: absolute; z-index: 10;
дляheader .container
- если чтобы шапка была над картинкой слайдера. Только какой-нибудь класс добавить другой, чтобы не промахнуться -.container
есть и внутри слайдера, который тоже внутриheader
.container
как.container1
дляheader
(самый первый), прописалposition: absolute; z-index: 10;
. Теперь шапка позади слайдера. Мб я что-то не так понял и не правильно сделал