title: Display only one slide with variableWidth parameter slickslider
body: <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>