0

$(document).ready(function() {
  $('.carousel__inner').slick({
    centerMode: true,
    centerPadding: '70px',
    slidesToShow: 5,
    slidesToScroll: 3,
    initialSlide: 1,
    prevArrow: '<button type="button" class="slick-prev"><img src="../src/img/left.png" alt=""></button>',
    nextArrow: '<button type="button" class="slick-next"><img src="../src/img/right.png" alt=""></button>',
    responsive: [{
        breakpoint: 768,
        settings: {
          arrows: false,
          centerMode: true,
          centerPadding: '40px',
          slidesToShow: 3
        }
      },
      {
        breakpoint: 480,
        settings: {
          arrows: false,
          centerMode: true,
          centerPadding: '40px',
          slidesToShow: 1
        }
      }
    ]
  });
});
* {
  font-family: RF Rufo;
  margin: 0;
  padding: 0;
}

.container {
  width: 1300px;
}

header {
  padding: 30px 30px 101px 0px;
  background-color: #000;
  height: 900px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  &_nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  &_menu {
    display: flex;
    justify-content: space-between;
    list-style-type: none;
    font-family: RF Rufo;
    font-style: normal;
    font-weight: bold;
    font-size: 15px;
    line-height: 134.3%;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    a {
      &::after {
        position: absolute;
        content: '';
        display: block;
        width: 0px;
        height: 0px;
        background-color: red;
        margin-top: 7px;
      }
      &:hover {
        &::after {
          position: absolute;
          content: '';
          display: block;
          width: 61px;
          height: 3px;
          background-color: red;
          transition: 0.5s all;
          margin-top: 7px;
        }
      }
    }
  }
  &_shopping {
    font-family: RF Rufo;
    font-style: normal;
    font-weight: bold;
    font-size: 22px;
    line-height: 134.3%;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    &_icon {
      margin-right: 31px;
    }
  }
  a {
    color: white;
    text-decoration: none;
  }
}

.promo {
  padding-top: 36px;
  display: flex;
  align-items: center;
  &_header {
    font-style: normal;
    font-weight: 100;
    font-size: 72px;
    line-height: 103.5%;
    letter-spacing: 0.025em;
    text-transform: uppercase;
  }
  &_wrapper {
    display: inline-block;
    width: 545px;
    color: white;
  }
  &_subheader {
    margin-top: 49px;
    font-family: Montserrat;
    font-style: normal;
    font-weight: normal;
    font-size: 18px;
    line-height: 165%;
    color: #A8A8AA;
  }
  &_block {
    margin-left: 47px;
    &_item {
      display: inline-block;
      height: 250px;
      width: 250px;
      opacity: .6;
      position: relative;
      .title {
        font-style: normal;
        font-weight: normal;
        font-size: 33px;
        line-height: 103.5%;
        letter-spacing: 0.025em;
        text-transform: uppercase;
        color: white;
        position: absolute;
        bottom: 94px;
      }
      .text_block {
        font-family: Montserrat;
        font-style: normal;
        font-weight: 500;
        font-size: 15px;
        line-height: 154.4%;
        color: white;
        position: absolute;
        bottom: 17px;
      }
    }
  }
  &_item_1 {
    background: url(../img/coffe.png) center center/cover no-repeat;
    margin-right: 20px;
  }
  &_item_2 {
    background: url(../img/machine.png) center center/cover no-repeat;
  }
  &_item_3 {
    background: url(../img/milk.png) center center/cover no-repeat;
  }
  &_item_4 {
    background: url(../img/barista.png) center center/cover no-repeat;
  }
  &_item_5 {
    background: url(../img/woman.png) center center/cover no-repeat;
  }
  &_item_6 {
    background: url(../img/woman.png) center center/cover no-repeat;
  }
  &_item_7 {
    background: url(../img/woman.png) center center/cover no-repeat;
  }
  &_item_8 {
    background: url(../img/woman.png) center center/cover no-repeat;
  }
}

.carousel {
  margin: 0 auto;
  margin-top: 20px;
  &__inner {
    position: relative;
  }
  .slick-prev {
    position: absolute;
    top: 50%;
    transform: translateY(-70%);
    left: 600px;
    z-index: 1;
    background: none;
    border: none;
    img {
      width: 21px;
      height: 50px;
    }
  }
  .slick-next {
    position: absolute;
    top: 50%;
    transform: translateY(-70%);
    right: 200px;
    z-index: 1;
    background: none;
    border: none;
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="css/bootstrap-reboot.min.css">
  <link rel="stylesheet" href="css/bootstrap-grid.min.css">
  <link rel="stylesheet" href="css/slick.css">
  <link rel="stylesheet" href="css/style.min.css">
  <link rel="stylesheet" href="fonts/fonts.css">
</head>

<body>
  <header>
    <div class="container">
      <div class="header">
        <div class="container">
          <div class="row">
            <nav class="header_nav">
              <img class="logo" src="img/Group.png" alt="">
              <ul class="header_menu col-md-5 offset-md-1">
                <li><a href="#">Продажа</a></li>
                <li><a href="#">Аренда</a></li>
                <li><a href="#">Сервис</a></li>
                <li><a href="#">О Компании</a></li>
              </ul>
              <div class="header_shopping col-md-3 offset-md-2">
                <img class="header_shopping_icon" src="img/typcn_shopping-cart.png" alt="">
                <a class="header_shopping_text">+7 (3452)500-006</a>
              </div>
            </nav>
          </div>
        </div>
      </div>
      <div class="promo">
        <div class="promo_wrapper">
          <div class="promo_header">МЫ ТАКИЕ КЛАССНЫЕ ПРЯМ не могу</div>
          <div class="promo_subheader">Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet luctus venenatis, lectus </div>
        </div>
        <div class="promo_block">
          <div class="promo_block_item promo_item_1">
            <div class="title">Продажа</div>
            <div class="text_block">Профессиональные кофемашины с бесплатной доставкой по РФ</div>
          </div>
          <div class="promo_block_item promo_item_2">
            <div class="title">Аренда</div>
            <div class="text_block">Бесплатная аренда кофемашины для ресторана или офиса</div>
          </div>
        </div>
      </div>

    </div>
    <div class="carousel">
      <div class="carousel__inner">
        <div>
          <div class="promo_block_item promo_item_3">
            <div class="title">Обучение бариста</div>
            <div class="text_block">Пройди обучение очно в школе барменов или онлайн</div>
          </div>
        </div>
        <div>
          <div class="promo_block_item promo_item_4">
            <div class="title">Сервис</div>
            <div class="text_block">Собственный сервисный цех в городе</div>
          </div>
        </div>
        <div>
          <div class="promo_block_item promo_item_5">
            <div class="title">собственный кофе</div>
            <div class="text_block">Кофе который мы производим и продаем</div>
          </div>
        </div>
        <div>
          <div class="promo_block_item promo_item_6">
            <div class="title">GRANNYS BAR</div>
            <div class="text_block">Кофе который мы производим и продаем</div>
          </div>
        </div>
        <div>
          <div class="promo_block_item promo_item_7">
            <div class="title">Бар Ржавый дед</div>
            <div class="text_block">Пройди обучение очно в школе барменов или онлайн</div>
          </div>
        </div>
        <div>
          <div class="promo_block_item promo_item_8">
            <div class="title">Обучение бариста</div>
            <div class="text_block">Пройди обучение очно в школе барменов или онлайн</div>
          </div>
        </div>
      </div>
    </div>
  </header>
  <script type="text/javascript" src="js/jquery-3.6.0.min.js"></script>
  <script type="text/javascript" src="js/jquery-migrate-1.4.1.min.js"></script>
  <script src="js/slick.min.js"></script>
  <script src="js/script.js"></script>
</body>

</html>

подскажите кто знает как выровнять слайдеры относительно других блоков?верхние 2 блока статичные а нижние три это слайдер.

2
  • верхние два блока статичные а нижние три это слайдер. не могу понять как их выровнять!
    – Юрий
    25 апр 2021 в 8:02
  • я голосую за закрытие этого вопроса, потому что это вопрос-картинка и он бесполезен в таком виде для базы знаний 25 апр 2021 в 8:35

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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