title: slick slider carousel variable width of items
body: <p>I am using <a href="http://kenwheeler.github.io/slick/" rel="nofollow noreferrer">http://kenwheeler.github.io/slick/</a> carousel with a variable width, which I could define in CSS with the predefined class '.slick-slide'. It works fine if I have only 1 carousel on the page, like so: </p>
  
  <p><strong>DEMO</strong></p>
  
  <hr>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$( document ).ready(function() {
  $('.variable-width').slick({
    dots: true,
    infinite: true,
    speed: 300,
    slidesToShow: 1,
    centerMode: true,
    variableWidth: true
  });
  
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.slick-slide {
    width: 475px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" rel="stylesheet"/&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.js"&gt;&lt;/script&gt;
  &lt;div class="variable-width"&gt;
        &lt;img src="http://www.transitionsabroad.com/listings/travel/articles/images/morocco-sand-dunes-of-chegaga.jpg"/&gt;
        &lt;img src="http://thescienceexplorer.com/sites/thescienceexplorer.com/files/blog/161130141053_1_540x360.jpg"/&gt;
        &lt;img src="http://www.transitionsabroad.com/listings/travel/articles/images/morocco-sand-dunes-of-chegaga.jpg"/&gt;
        &lt;img src="http://thescienceexplorer.com/sites/thescienceexplorer.com/files/blog/161130141053_1_540x360.jpg"/&gt;
        &lt;img src="http://www.transitionsabroad.com/listings/travel/articles/images/morocco-sand-dunes-of-chegaga.jpg"/&gt;
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>However, it seems that the generic .slick-slide applies to all carousels at the same time and overwrites a manually set width (even if I add another class or use '... !important'). In other words, I am looking for a way to have several ".slick-slide { width: ...px; } for different carousels.</p>
  
  <p>BTW I found <a href="https://stackoverflow.com/questions/23273506/how-can-i-change-the-width-and-height-of-slides-on-slick-carousel">How can I change the width and height of slides on Slick Carousel?</a> which, however, also only covers 1 carousel and doesn't solve the issue. </p>