Slick Carousel Center mode

by AlexKhrapal

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.css">
<div class="slider">
  <div class="slide">1</div>
  <div class="slide">2</div>
  <div class="slide">3</div>
  <div class="slide">4</div>
  <div class="slide">5</div>
  <div class="slide">6</div>
</div>

CSS

* {
  outline: none;
}

.slide {
  min-height: 200px;
  background: green;
  padding: 20px;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  transform: scale(.8);
  transition: transform .3s ease-in-out;
  will-change: transform;
}

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

.slide.clicked-current-slide {
  background: gold;
}

.slick-dots {
  text-align: center;
}

.slick-dots li {
  display: inline-block;
}

JavaScript

$(document).ready(function() {
   $('.slider').slick({
     centerMode: true,
     centerPadding: '100px',
     slidesToShow: 1,
     arrows: false,
     dots: true
   });
   
   $('.slick-current').on('click', function() {
   	$(this).addClass('clicked-current-slide');
   })
 });