Как сделать такой слайдеp?

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

Если можно в код пене. Боковые слайды должны выходить из контейнера. Как это реализовать? введите сюда описание изображения

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
        }
      }
    ]
  });
});

Ответы

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