我在幻灯片中使用响应式断点。在小屏幕上,我一次显示一张幻灯片。在大 2 上(大意味着小于 990
像素)
示例:我将断点设置为在小屏幕上一次显示一张幻灯片,并在大屏幕上禁用 slider
。我有 8
幻灯片。在大于 990
像素的屏幕中。
如果在小屏幕上导航到幻灯片并再次放大屏幕,则该 block 中的每张幻灯片都会消失。
您可以在 codepen 中查看
如果我删除这部分代码
responsive: [{
breakpoint: 568,
settings: {
slidesToShow: 1
}
}]
一切都会正常进行
请帮助任何人
这是我的配置光滑 slider
$(window).on('load', function(){
if($(window).width() < 990){
$('.container-slick').slick({
centerMode: true,
infinite: true,
prevArrow: false,
nextArrow: false,
speed: 200,
slidesToShow: 2,
slidesToScroll:1,
autoplay:true,
responsive: [{
breakpoint: 568,
settings: {
slidesToShow: 1
}
}]
});
}
});
$(window).on('resize', function(){
if($(window).width() < 990){
$('.container-slick').not('.slick-initialized').slick({
centerMode: true,
infinite: true,
prevArrow: false,
nextArrow: false,
speed: 200,
slidesToShow: 2,
slidesToScroll:1,
// if you remove from here
responsive: [{
breakpoint: 568,
settings: {
slidesToShow: 1
}
}]
// to there everything will work but i need 1 slide in small screens and 2 in screens more than 568 pixels
});
}
else{
$(".container-slick.slick-initialized").slick("unslick");
}
});
最佳答案
使用setTimeout
$(window).on('load', function(){
if($(window).width() < 990){
$('.container-slick').slick({
centerMode: true,
infinite: true,
prevArrow: false,
nextArrow: false,
speed: 200,
slidesToShow: 2,
slidesToScroll:1,
autoplay:true,
responsive: [{
breakpoint: 568,
settings: {
slidesToShow: 1
}
}]
});
}
});
$(window).on('resize', function(){
if($(window).width() < 990){
setTimeout(function(){
$('.container-slick').not('.slick-initialized').slick({
centerMode: true,
infinite: true,
prevArrow: false,
nextArrow: false,
speed: 200,
slidesToShow: 2,
slidesToScroll:1,
responsive: [{
breakpoint: 568,
settings: {
slidesToShow: 1
}
}]
});
},100)
}
else{
setTimeout(function(){ $(".container-slick.slick-initialized").slick("unslick"); },100)
}
});
您可以在 Codepen 中查看
关于jquery - 响应: Slides disappear on resize,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50485712/