Как сделать такой слайдеp?
Если можно в код пене. Боковые слайды должны выходить из контейнера. Как это реализовать?
HTML
<section class="proff">
<div class="container slider__container">
<h2 class="proff__title title">
Our professionals
</h2>
<div class="slider">
<div class="slider__item">
<div class="slide__image">
<img class="slide__img" src="images/man-1.jpg" alt="">
</div>
<div class="slide__text">
<h4 class="name__text">David Robertson</h4>
<p class="info__text">photographer with 5 years of experience</p>
</div>
</div>
<div class="slider__item">
<div class="slide__image">
<img class="slide__img" src="images/man-1.jpg" alt="">
</div>
<div class="slide__text">
<h4 class="name__text">David Robertson</h4>
<p class="info__text">photographer with 5 years of experience</p>
</div>
</div>
<div class="slider__item">
<div class="slide__image">
<img class="slide__img" src="images/man-1.jpg" alt="">
</div>
<div class="slide__text">
<h4 class="name__text">David Robertson</h4>
<p class="info__text">photographer with 5 years of experience</p>
</div>
</div>
<div class="slider__item">
<div class="slide__image">
<img class="slide__img" src="images/man-1.jpg" alt="">
</div>
<div class="slide__text">
<h4 class="name__text">David Robertson</h4>
<p class="info__text">photographer with 5 years of experience</p>
</div>
</div>
<div class="slider__item">
<div class="slide__image">
<img class="slide__img" src="images/man-1.jpg" alt="">
</div>
<div class="slide__text">
<h4 class="name__text">David Robertson</h4>
<p class="info__text">photographer with 5 years of experience</p>
</div>
</div>
<div class="slider__item">
<div class="slide__image">
<img class="slide__img" src="images/man-1.jpg" alt="">
</div>
<div class="slide__text">
<h4 class="name__text">David Robertson</h4>
<p class="info__text">photographer with 5 years of experience</p>
</div>
</div>
</div>
</div>
</section>
CSS
.slider__container {
position: relative;
}
.proff__title {
margin-top: 130px;
text-align: center;
margin-bottom: 93px;
}
.slider__item {
text-align: center;
}
.slide__image {
}
.slide__img {
width: 100%;
border: 1px solid #000;
}
.slide__text {}
.name__text {
font-size: 36px;
font-weight: 600;
line-height: 54px;
letter-spacing: -0.72px;
}
.info__text {
font-size: 24px;
line-height: 36px;
letter-spacing: -0.48px;
}
js
$(document).ready(function () {
$('.slider').slick({
centerMode: true,
centerPadding: '60px',
slidesToShow: 3,
responsive: [
{
breakpoint: 768,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 3
}
},
{
breakpoint: 480,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 1
}
}
]
});
});
Источник: Stack Overflow на русском