slick slider carousel variable width of items

Question

I am using http://kenwheeler.github.io/slick/ 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:

DEMO

$( document ).ready(function() {
$('.variable-width').slick({
  dots: true,
  infinite: true,
  speed: 300,
  slidesToShow: 1,
  centerMode: true,
  variableWidth: true
});

});

.slick-slide {
  width: 475px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.js"></script>
<div class="variable-width">
      <img src="http://www.transitionsabroad.com/listings/travel/articles/images/morocco-sand-dunes-of-chegaga.jpg"/>
      <img src="http://thescienceexplorer.com/sites/thescienceexplorer.com/files/blog/161130141053_1_540x360.jpg"/>
      <img src="http://www.transitionsabroad.com/listings/travel/articles/images/morocco-sand-dunes-of-chegaga.jpg"/>
      <img src="http://thescienceexplorer.com/sites/thescienceexplorer.com/files/blog/161130141053_1_540x360.jpg"/>
      <img src="http://www.transitionsabroad.com/listings/travel/articles/images/morocco-sand-dunes-of-chegaga.jpg"/>
  </div>

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.

BTW I found How can I change the width and height of slides on Slick Carousel? which, however, also only covers 1 carousel and doesn't solve the issue.

score 2 · Answer 1 · answered Nov 24 '17 at 16:58

If you want to individually change the width of your slick-slide you can do this:

Instead of using the generic slick-slide class, change it to this:

first call your div containing the slick slide, and then call your generic slick-slide class like so:

 .variable-width .slick-slide {
    width: 475px;
 }

This will change just the slide inside that div.

A working example you can find it here:

http://jsfiddle.net/yorknew45/ah0f8ndy/1/

Here you can see 2 equals slide using your code, that has different sizes.

Let me know if this answer your question!

slick slider carousel variable width of items

1 Answers1