<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

<div class="items">
  <div class="item">lorem1</div>
  <div class="item">lorem2</div>
  <div class="item">lorem3</div>
  <div class="item">lorem4</div>
  <div class="item">lorem5</div>
</div>

<script>
  $(".items").slick({
    autoplay: true,
    infinite: true,
    speed: 500,
    cssEase: 'ease-in-out'
  })
</script>
.items {
  max-width: 480px;
  max-height: 320px;
}

.item {
  padding: 50px 80px;
  transform: scale(0.6);
  transition: 0.34s linear;
}

.item {
  background: red;
}

.slick-active {
  transform: scale(1);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.