Как реализовать такой слайдер? (фото в приложении)

$('.slider').slick({ 
  slidesToShow:3, 
  centerMode:true, 
  centerPadding:0, 
  focusOnSelect:true 
})

*{ 
  box-sizing:border-box; 
} 
*:focus{ 
  outline:none; 
} 
.slide:before{ 
  content:''; 
  display:block; 
  min-height:100px; 
  background:radial-gradient(circle at center,yellow,orange); 
  opacity:.5; 
  transform-origin:center; 
  transform:scale(.6); 
  transition:all .5s ease; 
} 
.slide.slick-center:before{ 
  opacity:1; 
  transform:scale(1); 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script> 
<link href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" rel="stylesheet"/> 
 
<div class="slider"> 
  <div class="slide"></div> 
  <div class="slide"></div> 
  <div class="slide"></div> 
  <div class="slide"></div> 
</div>

let sliderArr = {}; 
let current = 0; 
let max; 
for (let i = 1; i < document.getElementById("slider").children.length - 1; i++) { 
  sliderArr[String(i)] = document.getElementById("slider").children[i]; 
  if (document.getElementById("slider").children[i].classList.contains("active")) { 
    current = i; 
  } 
  max = i; 
} 
document.getElementsByClassName("arrowLeft")[0].onclick = function() { 
  if (current > 1) { 
    $(sliderArr[current]).animate({ 
      height: '100px', 
      marginTop: '100px', 
      width: '100px' 
    }); 
    $(sliderArr[current - 1]).animate({ 
      height: '150px', 
      marginTop: '75px', 
      width: '150px' 
    }); 
    current--; 
  } 
} 
 
document.getElementsByClassName("arrowRight")[0].onclick = function() { 
  if (current < max) { 
    $(sliderArr[current]).animate({ 
      height: '100px', 
      marginTop: '100px', 
      width: '100px' 
    }); 
    $(sliderArr[current + 1]).animate({ 
      height: '150px', 
      marginTop: '75px', 
      width: '150px' 
    }); 
    current++; 
  } 
}

#slider { 
  float: left; 
  width: 430px; 
  height: 300px; 
  margin-left: 5%; 
  margin-right: 5%; 
  overflow: hidden; 
  user-select: none; 
} 
 
.arrow { 
  width: 40px; 
  height: 100%; 
  line-height: 300px; 
  font-size: 30px; 
  cursor: pointer; 
  text-align: center; 
} 
 
.arrowLeft { 
  float: left; 
} 
 
.arrowRight { 
  float: right; 
} 
 
.slide { 
  float: left; 
  width: 150px; 
  height: 150px; 
  background: #333; 
  margin-top: 75px; 
} 
 
.slide1 { 
  width: 100px; 
  height: 100px; 
  margin-top: 100px 
} 
 
.slide3 { 
  width: 100px; 
  height: 100px; 
  margin-top: 100px 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div id="slider"> 
  <div class="arrow arrowLeft"> 
    <</div> 
      <img class="slide slide1"> 
      <img class="slide slide2 active"> 
      <img class="slide slide3"> 
      <div class="arrow arrowRight">></div> 
  </div>