Как я могу делать этот slider? [закрывшая]

//Playing with Ken Wheeler Slick carousel
$('.slider').slick({
  //dots: true,
  infinite: true,
  centerMode: true,
  centerPadding: '12%',
  slidesToShow: 3,
  speed: 500,
  responsive: [{

    breakpoint: 992,
    settings: {
      slidesToShow: 1
    }

  }]
});


/* $(".slick-center").addClass(
		"switch");
$(".slick-current").prev().addClass(
		"switch");
$('.slider').on('init', function(currentSlide) {
	console.log(currentSlide);
	$(".slick-center").prev().toggleClass("switch"); 
}); */

button {
  z-index: 102;
}

section {
  position: relative;
  background: #FAFAFA;
}

.slick-slide {
  transform: scale(1);
  //opacity: .5;
  transition: .3s ease-in-out all;
}

.slick-slide.slick-center {
  opacity: 1;
  transform: scale(1.08);
}

.switch {
  background: #000;
}

.slider {
  //max-width: 1024px;
  margin: 0 auto;
  ///border: 1px solid;
  position: relative;
  &:after,
  &:before {
    content: "";
    background: #FAFAFA;
    position: absolute;
    top: 0;
    height: 100%;
    width: 12%;
    z-index: 100;
    //opacity: .9;
  }
  &:after {
    right: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
  }
  &:before {
    background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
  }
}

.img-box {
  padding: 0;
  img {
    width: 100%;
  }
}

article {
  border: 1px solid;
  float: left;
  margin: 50px 45px;
  font-size: 0.8vw;
}

h1 {
  font-size: 2vw;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.css" rel="stylesheet" />

<section>

  <div class="slider">
    <div>
      <article>
        <div class="col-xs-5 img-box">
          <img src="http://placehold.it/400x200" alt="" />
        </div>
        <div class="col-xs-7">
          <h1>1</h1>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti quos iusto praesentium, vitae officia similique, quo sapiente obcaecati modi quia laborum facere. Aut odit fugit architecto aperiam nam distinctio, debitis!
        </div>
      </article>
    </div>
    <div>

      <article>
        <div class="col-xs-5 img-box">
          <img src="http://placehold.it/400x200" alt="" />
        </div>
        <div class="col-xs-7">
          <h1>2</h1>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti quos iusto praesentium, vitae officia similique, quo sapiente obcaecati modi quia laborum facere. Aut odit fugit architecto aperiam nam distinctio, debitis!
        </div>
      </article>
    </div>
    <div>

      <article>
        <div class="col-xs-5 img-box">
          <img src="http://placehold.it/400x200" alt="" />
        </div>
        <div class="col-xs-7">
          <h1>3</h1>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti quos iusto praesentium, vitae officia similique, quo sapiente obcaecati modi quia laborum facere. Aut odit fugit architecto aperiam nam distinctio, debitis!
        </div>
      </article>
    </div>
    <div>

      <article>
        <div class="col-xs-5 img-box">
          <img src="http://placehold.it/400x200" alt="" />
        </div>
        <div class="col-xs-7">
          <h1>4</h1>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti quos iusto praesentium, vitae officia similique, quo sapiente obcaecati modi quia laborum facere. Aut odit fugit architecto aperiam nam distinctio, debitis!
        </div>
      </article>

    </div>
  </div>

</section>