Question

我试图改变在不同屏幕尺寸上处理某些互动内容的方式。在小屏幕上，此内容应使用Slick Carousel显示。

$(window).resize(function() {
    if($(window).width() <= 845) {
        $(".content").slick({
            centerMode: true,
            slidesToShow: 1
        });
    } else if ($(window).width() > 845) {
        $('.content').slick("unslick");
    }
});

每次将窗口调整为低于845的宽度时，都会调用光滑，这会导致问题。我尝试使用one()，但这不允许调整大小超过845，然后退回。

如果用户调整大小低于845，如何更改此值，如果窗口再次调整大小并符合<= 845条件，则调用一次Slick并且不再调用？

谢谢

Answer 1

一种选择是使用变量来控制光滑行为。基本上，当您第一次运行浮油时，将变量设置为true。并且您使用该变量作为检查的一部分来调用光滑。

var runSlick = true
$(window).resize(function() {
    if($(window).width() <= 845 && runSlick) {
        $(".content").slick({
            centerMode: true,
            slidesToShow: 1
        });
        runSlick = false;
    } else if ($(window).width() > 845) {
        $('.content').slick("unslick");
        runSlick = true;
    }
});

Answer 2

你可以使用这个：

var isResizedOnce = false;
$(window).resize(function() {
    if($(window).width() <= 845) {
        if(!(isResizedOnce)){
            $(".content").slick({
                centerMode: true,
                slidesToShow: 1
            });
        }
        else{
            isResizedOnce = true;
        }
    } else if ($(window).width() > 845) {
        $('.content').slick("unslick");
    }
});

在这段代码中，我使用了标志 isResizedOnce ，一旦窗口调整到845以下就会设置为true，并根据此操作执行操作。

在窗口调整大小，只有一次火灾事件

2 个答案: