JSFiddle - React, Tailwind, and code Playground

by Vitaliy

HTML

<link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.slick/1.5.9/slick.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.slick/1.5.9/slick-theme.css">
<script src="//cdn.jsdelivr.net/jquery.slick/1.5.9/slick.min.js"></script>
<div class="slider">
  <div class="item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nib.</div>
  <div class="item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nib.</div>
  <div class="item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nib.</div>
  <div class="item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nib.</div>
</div>

CSS

.item{
  background:#333;
  color:#fff;
  box-sizing:border-box;
  padding:5px;
  margin:0 5px;
}
.slider{
  position:relative;
}
.slick-prev, .slick-next{
  display:block;
  position:absolute;
  top:50%;
  left:10px;
  
  z-index:100;
  font-size:20px;
}
.slick-next{
  right:10px;
  left:auto;
}

JavaScript

$('.slider').slick({
  slidesToShow: 3,
  slidesToScroll: 1,
  centerMode: true,
  focusOnSelect: true,
  appendArrows: $('.slider'),
  prevArrow: "<span class='slick-prev'></span>",
  nextArrow: "<span class='slick-next'></span>"
});