CodePen Embed - zYMwVYp


<section id="team" class="team">
        <div class="container">
            <div class="team__inner">
                <p class="team__subtitle plum">
                    В нашем штате 37 сотрудников
                </p>
                <h2 class="team__title title">
                    Мы большая команда профессионалов
                </h2>
            </div>
            <div class="slider">
                <div class="slick-slide">
                    <img class="team__block-img" src="https://img.freepik.com/free-photo/young-bearded-man-with-striped-shirt_273609-5677.jpg?w=2000" alt="">
                    <div class="team__block-info">
                        <div class="name">
                            <h3 class="team__block-title name-title">
                                Александр Федулов
                            </h3>
                            <p class="team__block-text">
                                Ремонтник
                            </p>
                        </div>
                        <div class="expiriens">
                            <div class="expiriens__item">
                                <img class="expiriens__item-img" src="images/check.svg" alt="">
                                <p class="expiriens__item-text plum">398 ремонтных работ</p>
                            </div>
                            <div class="expiriens__item">
                                <img class="expiriens__item-img" src="images/check.svg" alt="">
                                <p class="expiriens__item-text plum">3 года в Fixper</p>
                            </div>
                            <div class="expiriens__item">
                                <img class="expiriens__item-img" src="images/check.svg" alt="">
                                <p class="expiriens__item-text plum">Рейтинг Fixper 4,5</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="slick-slide">
                    <img class="team__block-img" src="https://img.freepik.com/free-photo/young-bearded-man-with-striped-shirt_273609-5677.jpg?w=2000" alt="">
                    <div class="team__block-info">
                        <div class="name">
                            <h3 class="team__block-title name-title">
                                Александр Федулов
                            </h3>
                            <p class="team__block-text">
                                Ремонтник
                            </p>
                        </div>
                        <div class="expiriens">
                            <div class="expiriens__item">
                                <img class="expiriens__item-img" src="images/check.svg" alt="">
                                <p class="expiriens__item-text plum">398 ремонтных работ</p>
                            </div>
                            <div class="expiriens__item">
                                <img class="expiriens__item-img" src="images/check.svg" alt="">
                                <p class="expiriens__item-text plum">3 года в Fixper</p>
                            </div>
                            <div class="expiriens__item">
                                <img class="expiriens__item-img" src="images/check.svg" alt="">
                                <p class="expiriens__item-text plum">Рейтинг Fixper 4,5</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="slick-slide">
                    <img class="team__block-img" src="https://img.freepik.com/free-photo/young-bearded-man-with-striped-shirt_273609-5677.jpg?w=2000" alt="">
                    <div class="team__block-info">
                        <div class="name">
                            <h3 class="team__block-title name-title">
                                Александр Федулов
                            </h3>
                            <p class="team__block-text">
                                Ремонтник
                            </p>
                        </div>
                        <div class="expiriens">
                            <div class="expiriens__item">
                                <img class="expiriens__item-img" src="images/check.svg" alt="">
                                <p class="expiriens__item-text plum">398 ремонтных работ</p>
                            </div>
                            <div class="expiriens__item">
                                <img class="expiriens__item-img" src="images/check.svg" alt="">
                                <p class="expiriens__item-text plum">3 года в Fixper</p>
                            </div>
                            <div class="expiriens__item">
                                <img class="expiriens__item-img" src="images/check.svg" alt="">
                                <p class="expiriens__item-text plum">Рейтинг Fixper 4,5</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="slick-slide">
                    <img class="team__block-img" src="https://img.freepik.com/free-photo/young-bearded-man-with-striped-shirt_273609-5677.jpg?w=2000" alt="">
                    <div class="team__block-info">
                        <div class="name">
                            <h3 class="team__block-title name-title">
                                Александр Федулов
                            </h3>
                            <p class="team__block-text">
                                Ремонтник
                            </p>
                        </div>
                        <div class="expiriens">
                            <div class="expiriens__item">
                                <img class="expiriens__item-img" src="images/check.svg" alt="">
                                <p class="expiriens__item-text plum">398 ремонтных работ</p>
                            </div>
                            <div class="expiriens__item">
                                <img class="expiriens__item-img" src="images/check.svg" alt="">
                                <p class="expiriens__item-text plum">3 года в Fixper</p>
                            </div>
                            <div class="expiriens__item">
                                <img class="expiriens__item-img" src="images/check.svg" alt="">
                                <p class="expiriens__item-text plum">Рейтинг Fixper 4,5</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="slick-slide">
                    <img class="team__block-img" src="https://img.freepik.com/free-photo/young-bearded-man-with-striped-shirt_273609-5677.jpg?w=2000" alt="">
                    <div class="team__block-info">
                        <div class="name">
                            <h3 class="team__block-title name-title">
                                Александр Федулов
                            </h3>
                            <p class="team__block-text">
                                Ремонтник
                            </p>
                        </div>
                        <div class="expiriens">
                            <div class="expiriens__item">
                                <img class="expiriens__item-img" src="images/check.svg" alt="">
                                <p class="expiriens__item-text plum">398 ремонтных работ</p>
                            </div>
                            <div class="expiriens__item">
                                <img class="expiriens__item-img" src="images/check.svg" alt="">
                                <p class="expiriens__item-text plum">3 года в Fixper</p>
                            </div>
                            <div class="expiriens__item">
                                <img class="expiriens__item-img" src="images/check.svg" alt="">
                                <p class="expiriens__item-text plum">Рейтинг Fixper 4,5</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="slick-slide">
                    <img class="team__block-img" src="https://img.freepik.com/free-photo/young-bearded-man-with-striped-shirt_273609-5677.jpg?w=2000" alt="">
                    <div class="team__block-info">
                        <div class="name">
                            <h3 class="team__block-title name-title">
                                Александр Федулов
                            </h3>
                            <p class="team__block-text">
                                Ремонтник
                            </p>
                        </div>
                        <div class="expiriens">
                            <div class="expiriens__item">
                                <img class="expiriens__item-img" src="images/check.svg" alt="">
                                <p class="expiriens__item-text plum">398 ремонтных работ</p>
                            </div>
                            <div class="expiriens__item">
                                <img class="expiriens__item-img" src="images/check.svg" alt="">
                                <p class="expiriens__item-text plum">3 года в Fixper</p>
                            </div>
                            <div class="expiriens__item">
                                <img class="expiriens__item-img" src="images/check.svg" alt="">
                                <p class="expiriens__item-text plum">Рейтинг Fixper 4,5</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="slick-slide">
                    <img class="team__block-img" src="https://img.freepik.com/free-photo/young-bearded-man-with-striped-shirt_273609-5677.jpg?w=2000" alt="">
                    <div class="team__block-info">
                        <div class="name">
                            <h3 class="team__block-title name-title">
                                Александр Федулов
                            </h3>
                            <p class="team__block-text">
                                Ремонтник
                            </p>
                        </div>
                        <div class="expiriens">
                            <div class="expiriens__item">
                                <img class="expiriens__item-img" src="images/check.svg" alt="">
                                <p class="expiriens__item-text plum">398 ремонтных работ</p>
                            </div>
                            <div class="expiriens__item">
                                <img class="expiriens__item-img" src="images/check.svg" alt="">
                                <p class="expiriens__item-text plum">3 года в Fixper</p>
                            </div>
                            <div class="expiriens__item">
                                <img class="expiriens__item-img" src="images/check.svg" alt="">
                                <p class="expiriens__item-text plum">Рейтинг Fixper 4,5</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="slick-slide">
                    <img class="team__block-img" src="https://img.freepik.com/free-photo/young-bearded-man-with-striped-shirt_273609-5677.jpg?w=2000" alt="">
                    <div class="team__block-info">
                        <div class="name">
                            <h3 class="team__block-title name-title">
                                Александр Федулов
                            </h3>
                            <p class="team__block-text">
                                Ремонтник
                            </p>
                        </div>
                        <div class="expiriens">
                            <div class="expiriens__item">
                                <img class="expiriens__item-img" src="images/check.svg" alt="">
                                <p class="expiriens__item-text plum">398 ремонтных работ</p>
                            </div>
                            <div class="expiriens__item">
                                <img class="expiriens__item-img" src="images/check.svg" alt="">
                                <p class="expiriens__item-text plum">3 года в Fixper</p>
                            </div>
                            <div class="expiriens__item">
                                <img class="expiriens__item-img" src="images/check.svg" alt="">
                                <p class="expiriens__item-text plum">Рейтинг Fixper 4,5</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="slick-slide">
                    <img class="team__block-img" src="https://img.freepik.com/free-photo/young-bearded-man-with-striped-shirt_273609-5677.jpg?w=2000" alt="">
                    <div class="team__block-info">
                        <div class="name">
                            <h3 class="team__block-title name-title">
                                Александр Федулов
                            </h3>
                            <p class="team__block-text">
                                Ремонтник
                            </p>
                        </div>
                        <div class="expiriens">
                            <div class="expiriens__item">
                                <img class="expiriens__item-img" src="images/check.svg" alt="">
                                <p class="expiriens__item-text plum">398 ремонтных работ</p>
                            </div>
                            <div class="expiriens__item">
                                <img class="expiriens__item-img" src="images/check.svg" alt="">
                                <p class="expiriens__item-text plum">3 года в Fixper</p>
                            </div>
                            <div class="expiriens__item">
                                <img class="expiriens__item-img" src="images/check.svg" alt="">
                                <p class="expiriens__item-text plum">Рейтинг Fixper 4,5</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="slick-slide">
                    <img class="team__block-img" src="https://img.freepik.com/free-photo/young-bearded-man-with-striped-shirt_273609-5677.jpg?w=2000" alt="">
                    <div class="team__block-info">
                        <div class="name">
                            <h3 class="team__block-title name-title">
                                Александр Федулов
                            </h3>
                            <p class="team__block-text">
                                Ремонтник
                            </p>
                        </div>
                        <div class="expiriens">
                            <div class="expiriens__item">
                                <img class="expiriens__item-img" src="images/check.svg" alt="">
                                <p class="expiriens__item-text plum">398 ремонтных работ</p>
                            </div>
                            <div class="expiriens__item">
                                <img class="expiriens__item-img" src="images/check.svg" alt="">
                                <p class="expiriens__item-text plum">3 года в Fixper</p>
                            </div>
                            <div class="expiriens__item">
                                <img class="expiriens__item-img" src="images/check.svg" alt="">
                                <p class="expiriens__item-text plum">Рейтинг Fixper 4,5</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="slick-slide">
                    <img class="team__block-img" src="https://img.freepik.com/free-photo/young-bearded-man-with-striped-shirt_273609-5677.jpg?w=2000" alt="">
                    <div class="team__block-info">
                        <div class="name">
                            <h3 class="team__block-title name-title">
                                Александр Федулов
                            </h3>
                            <p class="team__block-text">
                                Ремонтник
                            </p>
                        </div>
                        <div class="expiriens">
                            <div class="expiriens__item">
                                <img class="expiriens__item-img" src="images/check.svg" alt="">
                                <p class="expiriens__item-text plum">398 ремонтных работ</p>
                            </div>
                            <div class="expiriens__item">
                                <img class="expiriens__item-img" src="images/check.svg" alt="">
                                <p class="expiriens__item-text plum">3 года в Fixper</p>
                            </div>
                            <div class="expiriens__item">
                                <img class="expiriens__item-img" src="images/check.svg" alt="">
                                <p class="expiriens__item-text plum">Рейтинг Fixper 4,5</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="slick-slide">
                    <img class="team__block-img" src="images/26.jpg" alt="">
                </div>
            </div>
        </div>
    </section>

.comments {
    padding: 100px 0 163px;
}

.comments__title {
    margin-bottom: 50px;
    text-align: center;
}

.slider__two {}

.slider__two-slick {}

.slider__two-slick__info {
    max-width: 470px;
    height: 100%;

    background: linear-gradient(0deg, #FAFAFA, #FAFAFA), #FAE6F5;
    padding: 75px 50px;
}

.slider__two-about {
    display: flex;
    align-items: center;


}

.slider__two-img {
    align-self: start;
}
.slick-slide > img {
  width: 100%;
  max-width: 100%;
}
.slider__two-about-info {
    max-width: 270px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-left: 25px;
}

.slider__two-subtitle {
    display: block;
    font-weight: 400;
    color: #000000;
    margin-top: 7px;
}

.slider__two-text {
    margin-top: 42px;
    font-weight: 400;
    font-size: 18px;
    line-height: 150%;
    color: #000000;
}

/* Слайдер */
.slick-slider {
    position: relative;
}

/* Слайдер запущен */
.slick-slider.slick-initialized {}

/* Слайдер с точками */
.slick-slider.slick-dotted {}

/* Ограничивающая оболочка */
.slick-list {
    overflow: hidden;
}

/* Лента слайдов */
.slick-track {
    display: flex;

}

/* Слайд */
.slick-slide {
    
    -webkit-backface-visibility:hidden
}

/* Слайд активный (показывается) */
.slick-slide.slick-active {}

/* Слайд основной */
.slick-slide.slick-current {}

/* Слайд по центру */
.slick-slide.slick-center {}

/* Клонированный слайд */
.slick-slide.slick-cloned {}

/* Стрелка */
.slick-arrow {
    display: flex;
    align-items: center;
    position: absolute;
    z-index: 6;
    bottom: -68px;
    right: 20px;
    background-color: transparent;
    border: none;
    cursor: pointer;

}

.slick-arrow>img {
    padding-left: 15px;
}

/* Стрелка влево */
.slick-arrow.slick-prev {
    right: 13%;
    font-weight: 500;
    font-size: 16px;
    line-height: 19px;
}

/* Стрелка вправо */
.slick-arrow.slick-next {
    font-weight: 500;
    font-size: 16px;
    line-height: 19px;
    color: #96317D;
}

/* Стрелка не активная */
.slick-arrow.slick-disabled {}

/* Точки (булиты) */
.slick-dots {
    display: flex;
    align-items: center;
    justify-content: start;
    position: absolute;
    bottom: -70px;
    left: 5px;


}

.slick-dots li {
    width: 28px;
    height: 28px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border: 2px solid transparent;

}

/* Активная точка */
.slick-dots li.slick-active {
    border: 2px solid #96317D;
    border-radius: 100%;


}

/* Элемент точки */
.slick-dots li button {
    font-size: 0;
    width: 8px;
    height: 8px;
    background-image: url(../images/dot.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-color: transparent;
    border: none;
    border-radius: 50%;
    padding: 0;
    outline: none;
    cursor: pointer;



}

/* Конкретный слайдер */

.slider {}

.slider .slick-arrow {}

    $('.slider').slick({
        infinite: true,
        slidesToShow: 3,
        slidesToScroll: 3,
        dots: true,
        prevArrow: "<button type='button' class='slick-prev slick-arrow'>Назад</button>",
        nextArrow: "<button type='button' class='slick-next slick-arrow'>Далее<img src='images/Arrow-purp.svg' alt=''></button>",
        responsive: [
            {
                breakpoint: 1250,
                settings: {
                    slidesToShow: 2,
                    slidesToScroll: 2,
                }
            }
            
        ]
    });

    $('.slider__two').slick({
        infinite: true,
        slidesToShow: 2,
        slidesToScroll: 2,
        dots: true,
        prevArrow: "<button type='button' class='slick-prev slick-arrow'>Назад</button>",
        nextArrow: "<button type='button' class='slick-next slick-arrow'>Далее<img src='images/Arrow-purp.svg' alt=''></button>",
    });

This Pen is owned by Danny Arty on CodePen. It is a fork of this Pen.

See more by @dannyarty on CodePen

External CSS

External JavaScript