我已经实现了光滑的滑块，它可以在不调整浏览器大小的情况下正常工作。但是当我将浏览器的大小调整为 1024 时，响应式断点设置不起作用。
jQuery--
$('.slider').slick({
centerMode: true,
slidesToShow: 1,
slidesToScroll: 1,
dots: true,
infinite: true,
cssEase: 'linear',
variableWidth: true,
variableHeight: true,
mobileFirst: true,
responsive: [{
breakpoint: 1024,
settings: {
slidesToShow: 4,
slidesToScroll: 1,
centerMode: false
}
}]
});
演示——https: //jsfiddle.net/squidraj/hn7xsa4y/4/
非常感谢任何帮助。
将此设置添加到您的代码中；
$(".slides").slick({
autoplay:true,
mobileFirst:true,//add this one
}
在每个断点中添加slidesToShow和选项。slidesToScroll
{
breakpoint: 786,
settings: {
slidesToShow: 3,
slidesToScroll: 1,
}
},
{
breakpoint: 568,
settings: {
slidesToShow: 2,
slidesToScroll: 1
}
}
首先，“variableHeight”选项在Slick Carousel中不存在。
要解决您的问题，请删除variableWidth: true，因为这将使您的幻灯片充满轮播。如果您的页面未使用此方法，您也不能使用“mobileFirst”选项。
所以最后你的配置应该是这样的，如下
$('.slider').slick({
centerMode: true,
slidesToShow: 1,
slidesToScroll: 1,
dots: true,
infinite: true,
cssEase: 'linear',
mobileFirst: true, //optional, to be used only if your page is mobile first
responsive: [{
breakpoint: 1024,
settings: {
slidesToShow: 4,
slidesToScroll: 1,
centerMode: false,
}
}]
});
此致。
这对我有用。
function resetSlick($slick_slider, settings) {
$(window).on('resize', function() {
if ($(window).width() < 320) {
if ($slick_slider.hasClass('slick-initialized')) {
$slick_slider.slick('unslick');
}
return
}
if (!$slick_slider.hasClass('slick-initialized')) {
return $slick_slider.slick(settings);
}
});
}
slick_slider = $('.client-logos');
settings = {
slidesToShow: 6,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 2000,
prevArrow: '',
nextArrow: '',
pauseOnHover: true,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 5,
slidesToScroll: 1,
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 3,
slidesToScroll: 1
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 2,
slidesToScroll: 1
}
}
// You can unslick at a given breakpoint now by adding:
// settings: "unslick"
// instead of a settings object
]
};
slick_slider = $('.container');
settings = {
slidesToShow: 6,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 2000,
prevArrow: '',
nextArrow: '',
pauseOnHover: true,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 5,
slidesToScroll: 1,
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 3,
slidesToScroll: 1
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 2,
slidesToScroll: 1
}
}
// You can unslick at a given breakpoint now by adding:
// settings: "unslick"
// instead of a settings object
]
};
slick_slider.slick(settings);
resetSlick(slick_slider, settings);
将此添加到您的 js 并调用滑块，如图所示。
并在你的css中制作slide display: inline-block;就是这样。将适用于所有响应式屏幕。
tl;dr当页面更改$('.selector').slick({...})顺序上的多个滑块有帮助时
我有类似的问题。我不明白为什么，但slidesToShow: 2对我来说没有在移动设备上生效，尽管如果你来回调整它就会生效。mobileFirst:true帮助但打破了桌面。添加两者slidesToShow并slidesToScroll没有帮助。但是，当我按照它们在页面上出现的顺序放置滑块的初始化时，它就起作用了。我不明白为什么......如果有多个页面具有不同的滑块位置，我不明白如何解决这个问题......
mobileFirst:true,//将此添加到您的JavaScript文件中，它应该可以工作:)
首先，您在示例中使用旧版本的 slick。此版本不支持mobileFirst属性。variableWidth其次，如果要使用slidesToShow属性，则必须删除。