Как задать отступ у элементов слайдера?

Рейтинг: 0Ответов: 0Опубликовано: 06.04.2023

Мб я что-то не понимаю или другое, но я не знаю как задать отступ у элементов слайдера. Margin не работает, или я где-то ошибся..

$(function() {
  $('.team-slider__items').slick({
    infinite: true,
    slidesToShow: 3,
    slidesToScroll: 1,
  });
})
.team-slider {
  padding-bottom: 130px;
  &__title {
    text-align: center;
    @extend %title-style;
    margin-bottom: 30px;
  }
  &__items {
    // position: relative;
  }
  &__item {
    background: rgba(255, 86, 129, 0.1);
    border-radius: 24px;
    padding: 25px 27px 80px;
    margin-left: 48px;
    position: relative;
    width: 380px;
    &::before {
      content: "";
      position: absolute;
      background-image: url(../images/slider/descr.svg);
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
      width: 27px;
      height: 167px;
      background-color: #FF5681;
      left: 0;
    }
  }
  &__item-img {
    border-radius: 0px 16px 16px 0px;
    width: 167px;
    height: 167px;
    object-fit: cover;
    margin-bottom: 20px;
  }
  &__item-name {
    font-weight: 700;
    font-size: 20px;
    line-height: 150%;
    margin-bottom: 14px;
  }
  &__item-star {
    margin-bottom: 20px;
  }
  &__item-text {
    color: rgba(#272727, .6);
    max-width: 320px;
  }
  .slick-arrow {
    font-size: 0;
    background-color: transparent;
    border: none;
    padding: 0;
  }
}
<section class="team-slider">
  <div class="container">
    <h4 class="team-slider__title">
      Мы - команда
    </h4>
    <div class="team-slider__items">
      <div class="team-slider__item">
        <img class="team-slider__item-img" src="images/slider/1.jpg" alt="">
        <p class="team-slider__item-name">
          Анна
        </p>
        <img class="team-slider__item-star" src="images/slider/stars.png" alt="">
        <p class="team-slider__item-text">
          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown
        </p>
      </div>
      <div class="team-slider__item">
        <img class="team-slider__item-img" src="images/slider/1.jpg" alt="">
        <p class="team-slider__item-name">
          Анна
        </p>
        <img class="team-slider__item-star" src="images/slider/stars.png" alt="">
        <p class="team-slider__item-text">
          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown
        </p>
      </div>
      <div class="team-slider__item">
        <img class="team-slider__item-img" src="images/slider/1.jpg" alt="">
        <p class="team-slider__item-name">
          Анна
        </p>
        <img class="team-slider__item-star" src="images/slider/stars.png" alt="">
        <p class="team-slider__item-text">
          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown
        </p>
      </div>
      <div class="team-slider__item">
        <img class="team-slider__item-img" src="images/slider/1.jpg" alt="">
        <p class="team-slider__item-name">
          Анна
        </p>
        <img class="team-slider__item-star" src="images/slider/stars.png" alt="">
        <p class="team-slider__item-text">
          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown
        </p>
      </div>
      <div class="team-slider__item">
        <img class="team-slider__item-img" src="images/slider/1.jpg" alt="">
        <p class="team-slider__item-name">
          Анна
        </p>
        <img class="team-slider__item-star" src="images/slider/stars.png" alt="">
        <p class="team-slider__item-text">
          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown
        </p>
      </div>
    </div>
  </div>
</section>

Ответы

Ответов пока нет.