JSFiddle - React, Tailwind, and code Playground

by abhiklpm

HTML

<html>

  <head>
    <title>Slick</title>
    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.css" />
  </head>

  <body>
    <div class="slick">
      <button class="left">
        left
      </button>
      <div class="variable-width slider">
        <div class="option">Option 1</div>
        <div class="option">Long Long Long Long Name</div>
        <div class="option">Option 3</div>
        <div class="option">Short</div>
      </div>
      <button class="right">
        right
      </button>
    </div>

    <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
    <script type="text/javascript" src="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>
  </body>

</html>

CSS

.slick {
  display: flex;
}

.variable-width {
  width: 400px;
}

.option {
  margin-right: 15px;
  outline: 1px solid green;
  margin: 5px;
  padding: 5px;
}

JavaScript

$(window).load(function() {
  $('.variable-width').slick({
    arrows: false,
    dots: false,
    infinite: false,
    speed: 300,
    slidesToShow: 1,
    slidesToScroll: 1,
    centerMode: false,
    variableWidth: true
  });
  $('.left').click(function() {
    $('.slider').slick('slickPrev');
  })

  $('.right').click(function() {
    $('.slider').slick('slickNext');
  })
});