Display only one slide with variableWidth parameter slickslider
<p>Each of my slides are different in width so the variableWidth parameter set to true is needed. The problem is that it shows as many slides that fits its container. I would rather display just one at a time.  More like the width of the container adapt to its content.</p>

<p><a href="http://jsfiddle.net/fmo50w7n/401" rel="nofollow">http://jsfiddle.net/fmo50w7n/401</a></p>

<p>HTML:</p>

<pre><code>&lt;section class="slider"&gt;
    &lt;div style="width:200px;height:200px"&gt;slide1&lt;/div&gt;
    &lt;div style="width:500px;height:300px;"&gt;slide2&lt;/div&gt;
    &lt;div style="width:300px;height:100px;"&gt;slide3&lt;/div&gt;
    &lt;div style="width:500px;height:500px;"&gt;slide4&lt;/div&gt;
    &lt;div style="width:500px;height:300px"&gt;slide5&lt;/div&gt;
    &lt;div style="width:500px;height:400px"&gt;slide6&lt;/div&gt;
&lt;/section&gt;
</code></pre>

<p>CSS:</p>

<pre><code>$c1: #3a8999;
$c2: #e84a69;

.slider {
    width: auto;
    margin: 30px 50px 50px;
}

.slick-slide {
    background: $c1;
    color: white;
    padding: 40px 0;
    font-size: 30px;
    font-family: "Arial", "Helvetica";
    text-align: center;
}

.slick-prev:before, 
.slick-next:before {
    color: black;    
}

.slick-dots {
    bottom: -30px;
}


.slick-slide:nth-child(odd) {
     background: $c2;
}
</code></pre>

<p>JS:</p>

<pre><code>$(".slider").slick({
    autoplay: true,
    dots: true,
    variableWidth:true,
    responsive: [{ 
        breakpoint: 500,
        settings: {
            dots: false,
            arrows: false,
            infinite: false,
            slidesToShow: 2,
            slidesToScroll: 2
        } 
    }]
});
</code></pre>