Как сверстать такой слайдер-карусель?

Question

Помогите пожалуйста, все никак не могу справится с такой каруселью на сайт:

Вся заморочка в том, что средниц слайд с описательным блоком, далее слайды идут на уменьшение

Пробовал собрать на slick - мало того, что толкком не вышло, так еще и переключение какое-то лаганное

jQuery('.team-carousel').slick({
	infinite: true,
	centerMode: true,
	slidesToShow: 3,
  speed: 500,
  variableWidth: true
})

.team-carousel { margin-bottom: 70px; }
.team-carousel .item-team { display: grid; grid-template-columns: 1fr; transition: 0.7s all; background: #fff; position: relative; }
.team-carousel .item-team .photo { transition: 0.2s all; background-size: cover !important; background-repeat: no-repeat !important; }
.team-carousel .item-team .photo img { position: relative; z-index: 2; max-width: 250px; width: 100%; }
.team-carousel .item-team .description { display: grid; grid-template-rows: auto 1fr auto; padding: 20px; box-shadow: inset 0 0 0 1px #E7E7E8; }
.team-carousel .item-team .description .name { font-size: 32px; line-height: 46px; font-weight: bold; }
.team-carousel .item-team .description .name span { display: block; }
.team-carousel .item-team .description p { font-size: 18px; font-weight: bold; }
.team-carousel .item-team .description .mail-link { font-size: 22px; line-height: 36px; }
.team-carousel .slick-slide { margin: 0 0px; }
.team-carousel .slick-list { margin: 0 -27px; }

.slick-slide .item-team{transform:scale(0.8);}
.description{
	display: none !important;
}
.slick-slide.slick-current.slick-active.slick-center .item-team{
	transform: scale(1.2);
  position: relative;
  z-index: 10;
}
.slick-slide.slick-current.slick-active.slick-center .item-team{
  grid-template-columns: 50% 50%;
}
/* .slick-slide.slick-current.slick-active.slick-center {
  
} */
.slick-slide.slick-current.slick-active.slick-center .description{
	display: block!important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<div class="team-carousel">


<!-- Block item -->
<div>
    <div class="item-team">
                <div class="photo">
                    <img src="https://www.med-mix.ru/img/no-pic.jpg" alt="">
                </div>
                <div class="description">
                    <div class="name">
                        <span>Name #1</span>
                        <span>Surname #1</span>
                    </div>
                    <p>CEO</p>
                <div class="mail-link"><a href="#">[email protected]</a></div>
                </div>
    </div>
</div>
<!-- End - Block item -->


<!-- Block item -->
<div>
    <div class="item-team">
                <div class="photo">
                    <img src="https://www.med-mix.ru/img/no-pic.jpg" alt="">
                </div>
                <div class="description">
                    <div class="name">
                        <span>Name #2</span>
                        <span>Surname #2</span>
                    </div>
                    <p>CEO</p>
                <div class="mail-link"><a href="#">[email protected]</a></div>
                </div>
    </div>
</div>
<!-- End - Block item -->


<!-- Block item -->
<div>
    <div class="item-team">
                <div class="photo">
                    <img src="https://www.med-mix.ru/img/no-pic.jpg" alt="">
                </div>
                <div class="description">
                    <div class="name">
                        <span>Name #3</span>
                        <span>Surname #3</span>
                    </div>
                    <p>CEO</p>
                <div class="mail-link"><a href="#">[email protected]</a></div>
                </div>
    </div>
</div>
<!-- End - Block item -->


<!-- Block item -->
<div>
    <div class="item-team">
                <div class="photo">
                    <img src="https://www.med-mix.ru/img/no-pic.jpg" alt="">
                </div>
                <div class="description">
                    <div class="name">
                        <span>Name #4</span>
                        <span>Surname #4</span>
                    </div>
                    <p>CEO</p>
                <div class="mail-link"><a href="#">[email protected]</a></div>
                </div>
    </div>
</div>
<!-- End - Block item -->


<!-- Block item -->
<div>
    <div class="item-team">
                <div class="photo">
                    <img src="https://www.med-mix.ru/img/no-pic.jpg" alt="">
                </div>
                <div class="description">
                    <div class="name">
                        <span>Name #5</span>
                        <span>Surname #5</span>
                    </div>
                    <p>CEO</p>
                <div class="mail-link"><a href="#">[email protected]</a></div>
                </div>
    </div>
</div>
<!-- End - Block item -->


<!-- Block item -->
<div>
    <div class="item-team">
                <div class="photo">
                    <img src="https://www.med-mix.ru/img/no-pic.jpg" alt="">
                </div>
                <div class="description">
                    <div class="name">
                        <span>Name #6</span>
                        <span>Surname #6</span>
                    </div>
                    <p>CEO</p>
                <div class="mail-link"><a href="#">[email protected]</a></div>
                </div>
    </div>
</div>
<!-- End - Block item -->


</div>

Answer 1

Тут работа ведется за счет позиционирования и высоты объектов. Передний элемент имеет самый высокий индекс и высоту и широту, вторые два сзади меньший индекс ну и соответственно отступы и т.д.. В эту сторону смотрите, это все делается на Css

Answer 2

Как вариант можно сделать так:

https://codepen.io/L2Banners/pen/bGdoerJ

$('.slider-nav').slick({
   centerMode: true,
  centerPadding: '0',
  slidesToShow: 5,
  slidesToScroll: 1,
  dots: true,
  focusOnSelect: true,
  padding: 0,
});

// On before slide change
$('.slider-nav').on('afterChange', function(event, slick, currentSlide, nextSlide){
   $('.slick-slide').removeClass('slick-active-first slick-active-last');
  $('.slick-active').eq(0).addClass('slick-active-first');
  $('.slick-active').eq(4).addClass('slick-active-last');
}).trigger('afterChange');

// On before slide change
$('.slider-nav').on('beforeChange', function(event, slick, currentSlide, nextSlide){
   $('.slick-slide').removeClass('slick-active-first slick-active-last');
}).trigger('beforeChange');

БЛОГ НА HUSL

Как сверстать такой слайдер-карусель?

Ответы (2 шт):