Slick Carousel Demo

by karamarimo

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<div class='container'>
  <div><h3>1</h3></div>
  <div><h3>2</h3></div>
  <div><h3>3</h3></div>
</div>

CSS

.slick-prev.slick-disabled {
  visibility: hidden;
}
.slick-prev::before {
  content: '<';
}
.slick-next.slick-disabled::before {
  content: '<<';
}
.slick-next::before {
  content: '>';
}

.container {
  display: flex;
  align-items: center;
}

.slick-slide {
  width: 200px;
  text-align: center;
  background: white;
  border: solid 10px gray;
}

.slick-arrow {
  width: 20px;
  height: 20px;
  font-size: 20px;
  flex-shrink: 0;
  border: none;
  background: none;
}

JavaScript

const $slick = $(".container")

$slick.slick({
  fade: false,
  infinite: false,
  arrows: true,
  centerMode: true,
  prevArrow: '<button class="slick-prev"></button>',
  nextArrow: '<button class="slick-next"></button>',
});

$('.slick-next').click(function () {
	if ($(this).hasClass('slick-disabled')) {
  	$slick.slick('slickGoTo', 0)
  }
})