Slick Carousel Center mode

by nickpish

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css">
<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">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<h1> Slick Carousel Center mode </h1>
</h1>
<div class="slider">
  <div>
    <div class="slide-h3">
     <i class="fa fa-lg fa-trash"></i>
    <h3>
    1
    </h3></div>
  </div>
  <div>
      <div class="slide-h3">
     <i class="fa fa-lg fa-trash"></i>
    <h3>
    2
    </h3></div>
  </div>
  <div>
   <div class="slide-h3">
     <i class="fa fa-lg fa-trash"></i>
    <h3>
    3
    </h3></div>
  </div>
  <div>
    <div class="slide-h3">
     <i class="fa fa-lg fa-trash"></i>
    <h3>
   4
    </h3></div>
  </div>
  <div>
     <div class="slide-h3">
     <i class="fa fa-lg fa-trash"></i>
    <h3>
    5
    </h3></div>
  </div>

</div>

CSS

body {
  background-color: grey;
}

.slick-center .slide-h3 {
  color: #FFF;
}

.slider {
  width: 600px;
  height: 150px;
  margin: 20px auto;
  text-align: center;
}

.slide-h3 {
  margin: 10% 0 10% 0;
  padding: 40% 20%;
  background: red;
}

.slider div {
  margin-right: 5px;
}

.slick-slide {
  opacity: .6;
  width:10px;
}

.slick-center {
  display: block;
  max-width: 10% !important;
  max-height: 20% !important;
  opacity: 1;
}

JavaScript

$(document).ready(function() {
   $('.slider').slick({
     centerMode: true,
     centerPadding: '60px',
     slidesToShow: 2,
     speed: 200,
     index: 2,
     focusOnSelect:true,
     responsive: [{
       breakpoint: 768,
       settings: {
         arrows: true,
         centerMode: true,
         centerPadding: '40px',
         slidesToShow: 3
       }
     }, {
       breakpoint: 480,
       settings: {
         arrows: false,
         centerMode: true,
         centerPadding: '40px',
         slidesToShow: 1
       }
     }]
   });
 });