jquery - 响应: Slides disappear on resize

Question

我在幻灯片中使用响应式断点。在小屏幕上，我一次显示一张幻灯片。在大 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");
    }
  });

Answer 1

使用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 中查看