Slick Slider Coverflow

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Slick Slider Coverflow</title>
</head>
<body>
  <div id="slider">
    <div class="slide"><img src="https://images.unsplash.com/photo-1501619951397-5ba40d0f75da?auto=format&fit=crop&w=700&q=80" alt=""></div>
    <div class="slide"><img src="https://images.unsplash.com/photo-1474490427056-7b4375391a1f?auto=format&fit=crop&w=700&q=80" alt=""></div>
    <div class="slide"><img src="https://images.unsplash.com/photo-1474490337689-d27c9bc8fd7c?auto=format&fit=crop&w=700&q=80" alt=""></div>
    <div class="slide"><img src="https://images.unsplash.com/photo-1457797030849-b57285bbd864?auto=format&fit=crop&w=700&q=80" alt=""></div>
    <div class="slide"><img src="https://images.unsplash.com/photo-1443616527314-4fbb6da1dcf5?auto=format&fit=crop&w=700&q=80" alt=""></div>
  </div>
</body>
</html>

SCSS

#slider {
  background: #fefefe;
  font-size: 0;
	margin-top: 100px;
	padding-top: 20px;
  
  .slide {
    background: #fafafa;
    display: inline-block;
    transition: transform 250ms ease-in;
    width: 300px;
		
		&.slick-current {
			transform: scale(1.2);
		}
  }
  
  img {
    display: block;
    width: 100%;
  }
  
  .slick-arrow {
    display: none;
  }
}

JavaScript

$(function(){

	$('#slider').on('init', function(slick){
		currentSlideEl = $("#slider .slide:not('.slick-cloned')").eq(0);
  });

	var slider = $('#slider').slick({
			arrows: false,
			slidesToShow: 1,
			centerMode: true,
			touchThreshold: 10,
			centerPadding: '100px'
  	}),
		currentSlideEl,
		zoomScale = 1.2;
  
  slider.on('swipe', function(event, slick, direction){
    console.log(direction);
    // left
  });
  
  // On before slide change
  slider.on('beforeChange', function(event, slick, currentSlide, nextSlide){
		currentSlideEl = $("#slider .slide:not('.slick-cloned')").eq(currentSlide);
  });
  
  slider.on('mousedown', function(e){
	

		// Drag start logic
		// ...
		console.log('drag has started');
		console.log('current slide: ', currentSlideEl);

		// Event to end drag, may want to include touchend events
		$(this).one('mouseup', function(e){

			$(this).off('mousemove');
			// Drag stop logic
			// ...

			console.log('drag has stopped');
			console.log('currentSlideEl: ', currentSlideEl);

		}).on('mousemove', function(e){

			// Logic for dragging, can get mouse position
			// will probably want to throttle
			// possibly include touchmove events also
			console.log('dragging');
			/* console.log('currentSlideEl: ', currentSlideEl) */;
			/* console.log('drag move', e.pageX); */

		});

  });
  
});