Как задать отступ у элементов слайдера?
Мб я что-то не понимаю или другое, но я не знаю как задать отступ у элементов слайдера. 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>
Источник: Stack Overflow на русском