JSFiddle - React, Tailwind, and code Playground

by Himanshu Joshi

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 style="width: 200px;"><p>200</p></div>
        <div style="width: 75px;"><p>75</p></div>
        <div style="width: 300px;"><p>300</p></div>
        <div style="width: 225px;"><p>225</p></div>
        <div style="width: 175px;"><p>175</p></div>
        <div style="width: 100px;"><p>100</p></div>
        <div style="width: 200px;"><p>200</p></div>
        <div style="width: 75px;"><p>75</p></div>
        <div style="width: 300px;"><p>300</p></div>
        <div style="width: 225px;"><p>225</p></div>
        <div style="width: 175px;"><p>175</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
});