Fixed slides with smooth carousel

Question

Is it that this can be achieved, i.e. so that the slides do not change in width depending on the size of the viewport: 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>'; } } } ] }); 

Answer 1

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

 variableWidth: true 

Answer 2

Check slick.js version - variableWidth was added to version 1.3.8 of September 30, 2014.

Answer 3

If variableWidth is set to true, make sure that you are not using the slidesToShow setting or that the slider will not move forward.