JSFiddle - React, Tailwind, and code Playground

by Chintan Upadhayay

HTML

<link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.slick/1.3.15/slick.css">
<script src="//cdn.jsdelivr.net/jquery.slick/1.3.15/slick.min.js"></script>
<h2>Variable Width</h2>
<div class="container">    
    <div class="slider variable-width">
        <div style="width: 100px;"><p>100</p></div>
      
    </div>    
</div>

CSS

body {
    background: #ccc;
    padding: 0;
}

.container {
    padding: 25px;
    border: 1px solid #000;
}

.slider {
    border: 1px solid #000;
}

.slider p {
    background: #fff;
    height: 60px;
    border: 1px solid #ccc;
}

JavaScript

$('.variable-width').slick({
  dots: true,
  infinite: true,
  speed: 300,
  /* slidesToShow: 3, */
  /* variableWidth: true */
});