0

Пытался сделать слайдером фон с переменными картинками. В общем, для одного блока фон работает, а для 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>

2
  • position: absolute; z-index: 10; для header .container - если чтобы шапка была над картинкой слайдера. Только какой-нибудь класс добавить другой, чтобы не промахнуться - .container есть и внутри слайдера, который тоже внутри header
    – Arbery
    Commented 12 июн. в 15:41
  • Я назвал .container как .container1 для header(самый первый), прописал position: absolute; z-index: 10;. Теперь шапка позади слайдера. Мб я что-то не так понял и не правильно сделал Commented 12 июн. в 16:19

1 ответ 1

0

В рабочем виде так: добавлен класс .header-top для блока с шапкой и стили для него внизу, чтобы изменить позиционирование и расположить поверх блока со слайдером. container переназывать нельзя - на нем еще и другие нужные стили висят.

.header-top {
  position: absolute;
  z-index: 10;
 }

$(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;
}

.header-top {
  position: absolute;
  z-index: 10;
}
<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 header-top">
    <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>

1
  • Спасибо, добрый господин) Commented 12 июн. в 18:07

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.