БЛОГ НА HUSL


Слайд не центрируеца

Автор вопроса: h0nova

Я использую слайдер slick, и слайди не центрируюца, вот так: введите сюда описание изображения

введите сюда описание изображения

html:

    <!DOCTYPE html>
<html lang="ru">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/style.min.css">
  <title>Mr. Driskell</title>
</head>

<body>
  <header class="header">
    <nav class="menu">
      <div class="container">
        <div class="menu-top">
          <div class="connection">
            <div class="connection__phone">
              <a href="tel:+7952552-52-52" class="connection__link connection__link--number">
                +7 952 552-52-52
              </a>
              <div class="connection__messens">
                <a href="#" class="connection__messen">Viber</a>
                <a href="#" class="connection__messen">Whats App</a>
                <a href="#" class="connection__messen">Telegram</a>
              </div>
            </div>
            <a href="mailto:[email protected]"
              class="connection__link connection__link--email">[email protected]</a>
          </div>
          <a href="#" class="logo">
            <img class="logo__img" src="images/logo.svg" alt="logo">
          </a>
          <div class="user-nav">
            <a href="#" class="user-nav__link user-nav__link--cart">
              <span class="user-nav__link--cart-number">17</span>
              <span class="user-nav__link--cart-price">37 280</span>
              <img src="images/icons/cart.svg" alt="cart">
            </a>
            <a href="#" class="user-nav__link">
              <img src="images/icons/favorites.svg" alt="favorites">
            </a>
            <a href="#" class="user-nav__link">
              <img src="images/icons/user.svg" alt="user">
            </a>
          </div>
        </div>
        <div class="menu-bottom">
          <div class="menu__dropdown-wrapper">
            <button class="menu__button">
              Каталог
            </button>
            <div class="menu__dropdown">
              <div class="menu__sorts">
                <button class="menu__sort menu__sort--active" href="#sort-1">
                  По категории
                </button>
                <button class="menu__sort" href="#sort-2">
                  По брендам
                </button>
              </div>
              <div class="menu__categories menu__categories--active" style="grid-template-columns: repeat(2, 1fr);"
                id="sort-1">
                <a href="#" class="menu__category">
                  Новинки
                </a>
                <a href="#" class="menu__category">
                  Тату наконечники
                </a>
                <a href="#" class="menu__category">
                  Наборы для татуировок
                </a>
                <a href="#" class="menu__category">
                  Блоки питания
                </a>
                <a href="#" class="menu__category">
                  Тату машинки
                </a>
                <a href="#" class="menu__category">
                  Педали и провода
                </a>
                <a href="#" class="menu__category">
                  Тату краски
                </a>
                <a href="#" class="menu__category">
                  Аксессуары
                </a>
                <a href="#" class="menu__category">
                  Тату иглы
                </a>
                <a href="#" class="menu__category">
                  Принтеры и планшеты
                </a>
                <a href="#" class="menu__category">
                  Тату держатели
                </a>
                <a href="#" class="menu__category">
                  Защита, ёмкости, расходные материалы
                </a>
              </div>
              <div class="menu__categories" style="grid-template-columns: repeat(5, 1fr);" id="sort-2">
                <a href="#" class="menu__category">
                  Aliance
                </a>
                <a href="#" class="menu__category">
                  EGO Bez’s Rotary
                </a>
                <a href="#" class="menu__category">
                  InkJecta Tattoo Machine
                </a>
                <a href="#" class="menu__category">
                  NEMESIS
                </a>
                <a href="#" class="menu__category">
                  Skinductor
                </a>
                <a href="#" class="menu__category">
                  Aloe Tattoo
                </a>
                <a href="#" class="menu__category">
                  Eikon Device Inc.
                </a>
                <a href="#" class="menu__category">
                  Intenze
                </a>
                <a href="#" class="menu__category">
                  Nocturnal Tattoo Ink
                </a>
                <a href="#" class="menu__category">
                  Starbrite
                </a>
                <a href="#" class="menu__category">
                  Anchored by Nikko Hurtado
                </a>
                <a href="#" class="menu__category">
                  Electrum
                </a>
                <a href="#" class="menu__category">
                  JACK & ALEXX
                </a>
                <a href="#" class="menu__category">
                  Panthera
                </a>
                <a href="#" class="menu__category">
                  Tattoorevive
                </a>
                <a href="#" class="menu__category">
                  BC Invention Comrany
                </a>
                <a href="#" class="menu__category">
                  EQUALISER by Kwadron
                </a>
                <a href="#" class="menu__category">
                  Kashalot Rotary
                </a>
                <a href="#" class="menu__category">
                  Perma Blend
                </a>
                <a href="#" class="menu__category">
                  TURANIUM Fabrika Rotary
                </a>
                <a href="#" class="menu__category">
                  Beauty Bit
                </a>
                <a href="#" class="menu__category">
                  Eternal
                </a>
                <a href="#" class="menu__category">
                  Kuro Sumi
                </a>
                <a href="#" class="menu__category">
                  Precision Needles
                </a>
                <a href="#" class="menu__category">
                  UNI–CART
                </a>
                <a href="#" class="menu__category">
                  Bishop Rotary
                </a>
                <a href="#" class="menu__category">
                  Excalibur
                </a>
                <a href="#" class="menu__category">
                  KWADRON™
                </a>
                <a href="#" class="menu__category">
                  Precision Tattoo Supply
                </a>
                <a href="#" class="menu__category">
                  Vlad Blad
                </a>
                <a href="#" class="menu__category">
                  Burlak Tattoo Machines
                </a>
                <a href="#" class="menu__category">
                  Fantasia Art Supply
                </a>
                <a href="#" class="menu__category">
                  Lauro Paolini
                </a>
                <a href="#" class="menu__category">
                  Premier Products
                </a>
                <a href="#" class="menu__category">
                  World Famous Bala
                </a>
                <a href="#" class="menu__category">
                  Cheyenne HAWK
                </a>
                <a href="#" class="menu__category">
                  FKirons
                </a>
                <a href="#" class="menu__category">
                  Lithuanian Irons
                </a>
                <a href="#" class="menu__category">
                  Radiant
                </a>
                <a href="#" class="menu__category">
                  World Famous Tattoo Ink
                </a>
                <a href="#" class="menu__category">
                  Critical Tattoo
                </a>
                <a href="#" class="menu__category">
                  Hanafy
                </a>
                <a href="#" class="menu__category">
                  Lucky Supply
                </a>
                <a href="#" class="menu__category">
                  Reprofx® Spirit™
                </a>
                <a href="#" class="menu__category">
                  2K2BT
                </a>
                <a href="#" class="menu__category">
                  Dermalize Protective
                </a>
                <a href="#" class="menu__category">
                  HM Tattoo Machines
                </a>
                <a href="#" class="menu__category">
                  Mercator Medical
                </a>
                <a href="#" class="menu__category">
                  Right Stuuf
                </a>
                <a href="#" class="menu__category">
                  БРОВИ
                </a>
                <a href="#" class="menu__category">
                  Dynamic Colors
                </a>
                <a href="#" class="menu__category">
                  Ink Machines
                </a>
                <a href="#" class="menu__category">
                  Millenium Mom’s Ink
                </a>
                <a href="#" class="menu__category">
                  S8TATTOO
                </a>
                <a href="#" class="menu__category">
                  КРАСКА Tattoo Ink
                </a>
              </div>
            </div>
          </div>
          <span class="menu__input-wrapper">
            <input class="menu__input" placeholder="Поиск">
          </span>
          <div class="menu__links">
            <a href="#" class="menu__link">
              Промокоды
            </a>
            <a href="#" class="menu__link">
              Скидки
            </a>
            <a href="#" class="menu__link">
              Помощь
            </a>
            <a href="#" class="menu__link">
              О нас
            </a>
            <a href="#" class="menu__link">
              Контакты
            </a>
          </div>
        </div>
      </div>
    </nav>
    <div class="header__slider">
      <div class="header__slide" style="background-image: url('/images/slider/header-slide.jpg');">
        <div class="container">
          <h1 class="header__title">
            Лучшие товары в мире татуировок
          </h1>
          <p class="header__text">
            Оборудование и расходники для самых ярких и качественных работ
          </p>

          <a href="#" class="header__link">
            Смотреть каталог
          </a>
        </div>
      </div>
      <div class="header__slide" style="background-image: url('/images/slider/header-slide.jpg');">
        <div class="container">
          <h1 class="header__title">
            Лучшие товары в мире татуировок
          </h1>
          <p class="header__text">
            Оборудование и расходники для самых ярких и качественных работ
          </p>

          <a href="#" class="header__link">
            Смотреть каталог
          </a>
        </div>
      </div>
    </div>
  </header>
  <script src="./js/main.min.js"></script>
</body>

</html>

scss:

@import 'vars';
@import 'fonts';
@import 'libs';
@import 'reset';
@import 'global';

.header {
  background-color: #030201;
  .container {
    position: relative;
  }
  .logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  &__slider {
    width: 100%;
  }
  &__slide {
    max-width: 1568px;
    width: 100%;
    margin: 0 auto;
    padding: 110px 176px;
    min-height: 700px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
  }
  &__title {
    @extend %forum-400;
    font-size: 75px;
    line-height: 100%;
    color: $orange;
    max-width: 600px;
    margin-bottom: 30px;
  }
  &__text {
    font-size: 25px;
    color: $white;
    max-width: 430px;
    margin-bottom: 60px;
  }
  &__link {
    font-size: 20px;
    line-height: 150%;
    color: $white;
    background-image: url('../images/button-header.svg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    padding: 20px 64px;
  }
}
.menu {
  padding-top: 14px;
  background-color: $black;
  &-top {
    position: relative;
    display: flex;
    justify-content: space-between;
    padding-bottom: 10px;
    border-bottom: 1px solid $dOrange;
    &::before,
    &::after {
      content: '';
      position: absolute;
      bottom: 0px;
      width: 6px;
      height: 7px;
      transform: translateY(58%);
    }
    &::before {
      background-image: url('../images/icons/arrow-left.svg');
      left: 0;
    }
    &::after {
      right: 0;
      background-image: url('../images/icons/arrow-right.svg');
    }
  }
  .connection {
    margin-top: 20px;
    display: flex;
    grid-gap: 56px;
    &__link {
      position: relative;
      font-size: 15px;
      line-height: 150%;
      color: $white;
      padding-left: 38px;
      &::before {
        content: '';
        position: absolute;
        width: 28px;
        height: 28px;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
        top: -3px;
        left: 0;
      }
    }
    &__link--number::before {
      background-image: url('../images/icons/call.svg');
    }
    &__link--email::before {
      background-image: url('../images/icons/mail.svg');
    }
    &__messen {
      margin-top: 2px;
      font-size: 12px;
      line-height: 150%;
      color: $gray;
      transition: color .3s;
      &:hover {
        color: $orange;
      }
    }
    &__messen + .connection__messen {
      margin-left: 10px;
    }
  }
  .user-nav {
    display: flex;
    align-items: center;
    grid-gap: 50px;
    margin-top: 12px;
    height: 38px;
    &__link--cart {
      position: relative;
      display: flex;
      align-items: center;
    }
    &__link--cart-number {
      position: absolute;
      background-color: $orange;
      top: -10px;
      right: -13px;
      padding: 0 5px;
      color: $white;
    }
    &__link--cart-price {
      color: $white;
      margin-right: 5px;
      &::after {
        content: ' ₽';
      }
    }
  }
  &-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
  }
  &__button {
    font-size: 25px;
    position: relative;
    color: $white;
    padding-right: 34px;
    &::before {
      content: '';
      position: absolute;
      width: 28px;
      height: 28px;
      right: 0;
      bottom: -4px;
      background-image: url('../images/icons/menu.svg');
    }
  }
  &__dropdown {
    &-wrapper {
      position: relative;
    }
    display: none;
    position: absolute;
    background-color: $bgCard;
    top: 46.4px;
    box-shadow: 0 20px 50px 0 rgba($color: #000, $alpha: .1);
    &::before {
      content: '';
      position: absolute;
      width: 28px;
      height: 14px;
      left: 50px;
      top: -13.7px;
      background-image: url('../images/icons/triangle.svg');
    }
  }
  &__sorts {
    display: flex;
    position: relative;
    padding: 30px 50px;
    border-bottom: 1px solid $gray;
    &::before,
    &::after {
      content: '';
      position: absolute;
      width: 6px;
      height: 6px;
      bottom: -3.5px;
    }
    &::before {
      background-image: url('../images/icons/arrow-left--gray.svg');
      left: 0;
    }
    &::after {
      background-image: url('../images/icons/arrow-right--gray.svg');
      right: 0;
    }
  }
  &__sort + .menu__sort{
    margin-left: 30px;
  }
  &__sort--active {
    position: relative;
    color: $orange;
    border-bottom: 1px solid $orange;
    transition: color .3s;
    &::before,
    &::after {
      content: '';
      position: absolute;
      width: 6px;
      height: 6px;
      bottom: -3.5px;
      background-image: url('../images/icons/diamond.svg');
    }
    &::before {
      left: -3px;
    }
    &::after {
      right: -3px;
    }
  }
  &__categories {
    display: none;
    grid-gap: 13px 40px;
    padding: 40px 50px 50px;
    white-space: nowrap;
    &--active {
      display: grid;
    }
  }
  &__category {
    display: block;
    transition: color .3s;
    &:hover {
      color: $orange;
    }
  }
  &__input {
    max-width: 418px;
    width: 100%;
    border: 1px solid $dOrange;
    padding: 8px 16px 8px 54px;
    position: relative;
    color: $white;
    &-wrapper{
      position: relative;
      &::before {
        content: '';
        position: absolute;
        width: 28px;
        height: 28px;
        left: 16px;
        top: 50%;
        transform: translateY(-50%);
        background-image: url('../images/icons/search.svg');
      }
    }
    &::placeholder {
      position: relative;
      color: $dGray;
      font-size: 15px;
      line-height: 150%;
    }
  }
  &__link {
    position: relative;
    color: $white;
    transition: color .3s;
    &::before {
      content: '';
      position: absolute;
      width: 6px;
      height: 15px;
      background-image: url('../images/icons/hover.svg');
      left: 50%;
      transform: translateX(-50%);
      bottom: -17px;
      opacity: 0;
      transition: opacity .4s;
    }
    &:hover {
      color: $orange;
      &::before {
        opacity: 1;
      }
    }
  }
  &__link + .menu__link {
    margin-left: 60px;
  }
}

@import 'media';

js:

$('.menu__button').click(function(e) {
  e.stopPropagation();
  $('.menu__dropdown').toggle();
});

$(document).on('click', function(e) {
  if (!$(e.target).closest('.menu__dropdown').length) {
    $('.menu__dropdown').hide();
  }
});

$('.menu__sort').on('click', function (e) {
  e.preventDefault();
  $('.menu__sort').removeClass('menu__sort--active');
  $(this).addClass('menu__sort--active');

  $('.menu__categories').removeClass('menu__categories--active');
  $($(this).attr('href')).addClass('menu__categories--active');
});

$('.header__slider').slick({
  arrows: false,
  vertical: true,
  verticalSwiping: true,
  centerMode: true,
  centerPadding: '0',
});

Источник

Ответы (0 шт):

licensed under cc by-sa 3.0 with attribution.