JSFiddle - React, Tailwind, and code Playground

by Dmitry

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>
<div class="slick">
  <div><img src="https://fakeimg.pl/350x200/?text=Hello 1"></div>
  <div><img src="https://fakeimg.pl/350x200/?text=Hello 2"></div>
  <div><img src="https://fakeimg.pl/350x200/?text=Hello 3"></div>
  <div><img src="https://fakeimg.pl/350x200/?text=Hello 4"></div>
  <div><img src="https://fakeimg.pl/350x200/?text=Hello 5"></div>
  <div><img src="https://fakeimg.pl/350x200/?text=Hello 6"></div>
  <div><img src="https://fakeimg.pl/350x200/?text=Hello 7"></div>
  <div><img src="https://fakeimg.pl/350x200/?text=Hello 8"></div>
  <div><img src="https://fakeimg.pl/350x200/?text=Hello 9"></div>
  <div><img src="https://fakeimg.pl/350x200/?text=Hello 10"></div>
</div>

CSS

.slick {
  width: 2500px;
}

JavaScript

$(function(){
  $('.slick').slick({
    dots: false,
    arrows: false,
    infinite: true,
    speed: 300,
    slidesToShow: 1,
    centerMode: true,
    variableWidth: true
  });
});