fixed width slides with slick carousel

Question

Is there that this can be achieved ie so that the slides don't adjust in width depending on viewport size: My example is here:

http://machinas.com/wip/hugoboss/responsive-template/v4/

And the code is as follows:

$('.main-slider').slick({
         centerMode: true,
        centerPadding: '0px',
        slidesToShow: 3,
        dots: true,
         speed: 1200,
         slidesToScroll: 1,
          infinite: true,
          customPaging: function(slick,index) {
                return $('.thumbnails').eq(index).find('img').prop('outerHTML');
            },
          responsive: [
            {
              breakpoint: 640,
              settings: {
                arrows: false,
                dots: true,
                centerMode: false,
                slidesToShow: 1,
                customPaging: function(slick,index) {
                    return '<button type="button" data-role="none">' + (index + 1) + '</button>';
                  }
              }
            }
          ]
});

related http://stackoverflow.com/questions/23273506/how-can-i-change-the-width-and-height-of-slides-on-slick-carousel — Adriano, Feb 09 '16 at 10:39

score 33 · Answer 1 · edited Oct 29 '14 at 14:57

33

You can use the variable width setting. This tells slick to let your css do the work:

variableWidth: true

edited Oct 29 '14 at 14:57

Andy

49,085
60
166
233

answered Oct 29 '14 at 14:50

Jeff Lindblom

421
4
3

1

I was busy for hours - thanks for this!! @user1937021 please mark this as an answer. – TheBlackBenzKid Sep 29 '16 at 08:48
Seriously, I love you. - Thanks, you saved my ass. :) – Julian Camilleri Nov 19 '17 at 15:15
This really needs to be more prominent in the docs. Thanks heaps! – Josh Apr 16 '21 at 07:33

score 3 · Answer 2 · answered Jan 21 '15 at 20:42

3

Check your slick.js version - variableWidth was added to version 1.3.8 on Sept 30, 2014.

answered Jan 21 '15 at 20:42

ksudac

71
4

score 3 · Answer 3 · answered May 13 '15 at 05:40

3

If you set variableWidth to true, make sure you do not use the slidesToShow setting, or the slider will not advance.

answered May 13 '15 at 05:40

Taiger

129
1
3

fixed width slides with slick carousel

3 Answers3

Linked