Slick center mode, вариации

HTML

<link rel="stylesheet" href="//kenwheeler.github.io/slick/slick/slick.css">
<link rel="stylesheet" href="//kenwheeler.github.io/slick/slick/slick-theme.css">
<script src="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.0/slick/slick.min.js"></script>

<div class="slider1">

  <img src="https://otvet.imgsmail.ru/download/2b278e2ed5a4b8d2391b0d7707162918_i-5.jpg" alt="">
  <img src="http://www.flowerbank.ru/wp-content/uploads/2016/03/0403-06.jpg" alt="">
  <img src="https://lh5.googleusercontent.com/-XyDmi1BM_eY/TYfIll4zFzI/AAAAAAAABDE/a5K9rn2M7GU/s400/p10501281.jpg" alt="">

  <img src="http://img1.liveinternet.ru/images/attach/c/7/97/900/97900863_besshovniefonipodsnejnik25rr.jpg" alt="">

</div>

CSS

* {
  box-sizing: border-box
}

html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
}
.slider1 {
  position: relative;
  width: 300px;
  margin: 50px auto;
}
.slider1::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: url(https://clipartstation.com/wp-content/uploads/2017/11/decoration-clipart-png-300x200.png) no-repeat center;
  z-index: 2;
}

JavaScript

$('.slider1').slick({
  slidesToShow: 1,
  centerMode: true,
  arrows: false,
  centerPadding: 0, //чтобы не было боковых слайдов
  autoplay: true
});