<div class="container">
  <h2>Center Mode</h2>
  <div class="slider center">
    <div class="clip"><h3><div class="top">top</div><div>1</div><div class="bottom">btm</div></h3></div>
    <div class="clip"><h3><div class="top">top</div><div>2</div><div class="bottom">btm</div></h3></div>
    <div class="clip"><h3><div class="top">top</div><div>3</div><div class="bottom">btm</div></h3></div>
    <div class="clip"><h3><div class="top">top</div><div>4</div><div class="bottom">btm</div></h3></div>
    <div class="clip"><h3><div class="top">top</div><div>5</div><div class="bottom">btm</div></h3></div>
    <div class="clip"><h3><div class="top">top</div><div>6</div><div class="bottom">btm</div></h3></div>
  </div>
</div>

html, body {
  padding: 0;
  margin: 0;
  background-color: rgba(black, 0.3);
}
.container {
  position: relative;
  margin: 0 auto;
  width: 60%;
  background-color: rgba(black, 0.3);
}
h2{
  font-family:Pacifico;
  font-size:36px;
  margin:20px auto;
  text-align:center;
}
h3{
  background:#fff;
  color:#3498db;
  font-size:36px;
  line-height:100px;
  margin:10px;
  padding:2%;
  //width: 100px;
  //height: 100px;
  position:relative;
  text-align:center;
  .top {
    font-size: 70%;
    height: 70%;
    
    margin: 0 auto;
    background-color: rgba(red, 0.3);
  }
  .bottom {
    font-size: 70%;
    width: 70%;
    margin: 0 auto;
    background-color: rgba(red, 0.3);
  }
}
.clip {
  height: 100px;
  overflow: hidden;
  bottom: 0;
}
.center .slick-slide {
  background-color: rgba(red, 0.3);
  height: 400px;
}
.center .slick-center h3{
  //-moz-transform:scale(1.08);
  //-ms-transform:scale(1.08);
  //-o-transform:scale(1.08);
  //-webkit-transform:scale(1.08);
  //transform:scale(1.08);
  //width: 150px;
  //height: 120px;
  color:#e67e22;
  opacity:1;
  .top {
    font-size: 90%;
    width: 90%;
    background-color: rgba(blue, 0.3);
  }
  .bottom {
    font-size: 90%;
    width: 90%;
    background-color: rgba(green, 0.3);
  }
}
.center h3{
  opacity:0.8;
  //transition:all 300ms ease;
  bottom: 0;
}

$('.center').slick({
  centerMode: true,
  infinite: true,
  centerPadding: '60px',
  slidesToShow: 3,
  speed: 500,
  variableWidth: false,
});
$('.center').on('beforeChange', function(event, slick, currentSlide, nextSlide){
  console.log('beforeChange', currentSlide, nextSlide);
});
$('.center').on('afterChange', function(event, slick, currentSlide){
  console.log('afterChange', currentSlide);
});