响应:幻灯片在调整大小时消失

Question

我在幻灯片中使用了响应断点.在小屏幕上,我一次显示1张幻灯片.在大2(大意味着小于990像素)

示例:我将断点设置为在小屏幕上一次显示1张幻灯片,并禁用slider大屏幕.我有8幻灯片.在屏幕大于990像素.

如果在小屏幕上我导航到幻灯片并再次使屏幕变大,则此块中的每个幻灯片都会消失.

你可以在codepen中检查它

如果我删除这部分代码

responsive: [{
                breakpoint: 568,
                settings: {
                    slidesToShow: 1
                }
            }]

一切都会好起来的

请帮助任何人

这是我的配置 Slick 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");
    }
  });

Answer 1

使用设置超时

$(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中查看