jQuery 带有光滑旋转木马的固定宽度幻灯片
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25775152/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
fixed width slides with slick carousel
提问by user1937021
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/
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>';
}
}
}
]
});
回答by Jeff Lindblom
You can use the variable width setting. This tells slick to let your css do the work:
您可以使用可变宽度设置。这告诉 slick 让你的 css 来完成这项工作：
variableWidth: true
回答by ksudac
Check your slick.js version - variableWidth was added to version 1.3.8 on Sept 30, 2014.
检查您的 slick.js 版本 - variableWidth 已于 2014 年 9 月 30 日添加到版本 1.3.8。
回答by Taiger
If you set variableWidth to true, make sure you do not use the slidesToShow setting, or the slider will not advance.
如果将 variableWidth 设置为 true，请确保不要使用 slidesToShow 设置，否则滑块不会前进。
