<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
	});

External CSS

  1. https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css
  2. https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js