<div id="slick-slider">
  <div class="slide">
     <div class="inner-block"></div>
  </div>
  <div class="slide">
     <div class="inner-block"></div>
  </div>
  <div class="slide">
     <div class="inner-block"></div>
  </div>
  <div class="slide">
     <div class="inner-block"></div>
  </div>
  <div class="slide">
     <div class="inner-block"></div>
  </div>
</div>

body {
  background-color: black;
}

#slick-slider {
  padding: 0 50px;
}

.slick-prev {
  left: 15px!important;
}

.slick-next {
  right: 15px!important;
}

.slide {
  padding: 0 10px;
}

.inner-block {
  height: 100px;
  background-color: red;
  transition: all 500ms ease;
}

.slide {
  transition: all 500ms ease;
  transform: translate(0px, 50px);
}

.slide:hover,
.slide.slick-current {
  transform: translate(0px, 0px);
}

$('#slick-slider').slick({
		infinite: true,
		slidesToShow: 3,
		slidesToScroll: 1,
		swipe: true,
		arrows: true,
		// swipeToSlide: true,
		focusOnSelect: true,
		centerMode: false
	});