JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

.slide {
  height: 200px;
}

.slick-slide {
  transition: transform 0.5s;
  transform: scale(0.6);
  font-size: 48px;
}

.slick-xxx {
  transform: scale(0.6);
}
.slick-xxx + .slick-slide {
  transform: scale(0.8);
}
.slick-xxx + .slick-slide + .slick-slide {
  transform: scale(1);
}
.slick-xxx + .slick-slide + .slick-slide + .slick-slide {
  transform: scale(0.8);
}
.slick-xxx + .slick-slide + .slick-slide + .slick-slide + .slick-slide {
  transform: scale(0.6);
}

JavaScript

$('.slick-carousel').html([
  'orange', 'brown', 'green',
  'yellow', 'aqua', 'magenta',
  'lime', 'blue', 'red', 'grey',
].map((n, i) =>
  `<div class="slide" style="background-color: ${n}">${i}</div>`
).join('')).on('init beforeChange', function(e, slick, curr, next) {
  const
    count = slick.slideCount,
    show = slick.options.slidesToShow,
    center = slick.options.centerMode,
    index = (next | 0) - center * (count > show ? show / 2 | 0 : 0),
    selector = shift => `[data-slick-index="${index + shift * count}"]`;

  $('.slick-xxx', this).removeClass('slick-xxx');
  $([ 0, 1, -1 ].map(selector).join(', '), this).addClass('slick-xxx');
}).slick({
  slidesToShow: 5,
  infinite: true,
  centerMode: true,
});