javascript - 仅在特定窗口宽度下启用平滑，当窗口宽度变大时禁用平滑

Question

我正在写一个博客，仅当视口(viewport)为特定值时才用光滑的轮播显示帖子，因此在移动设备上可以滚动它们。

我尝试了很多方法，但都没有成功。出现了各种问题。

最接近我的目标的代码片段如下:

function slickify(){
    $('.goslick').slick({
        dots: false,
        infinite: true,
        speed: 300,
        slidesToShow: 1,
        slidesToScroll: 1,
            responsive: [
                {
                    breakpoint: 500,
                     settings: "unslick"
                }
            ]
     });
                }
    slickify();

    $(window).resize(function(){
        var $windowWidth = $(window).width();
        if ($windowWidth > 500) {
            slickify();   
        }
    });

不幸的是，这与我的目标相反；当视口(viewport)大于相对变量指示的值时，它会启用轮播。我真的无法逆转这个脚本。

Here is the not-working prototype

Answer 1

您需要一些东西来撤消在 slickify() 函数中执行的代码。您立即调用 slickify();，因此它将执行。当窗口大小小于 500 时，您只需要添加一条 else 语句即可执行不同的操作。

function slickify(){
    $('.goslick').slick({
    dots: false,
    infinite: true,
    speed: 300,
    slidesToShow: 1,
    slidesToScroll: 1,
        responsive: [
            {
                breakpoint: 500,
                 settings: "unslick"
            }
        ]
     });
}

function deslickify(){
    //todo logic here to disable 
}


slickify();

$(window).resize(function(){
    var $windowWidth = $(window).width();
    if ($windowWidth > 500) {
        slickify();   
    } else {
        deslickify();
    }
});

 

编辑:

这个应该按照您的方式工作。看起来您已经从这个问题中获取了工作代码:Enable and disable Slick Slider on certain break points

function slickify(){
    $('.slick').slick({
        autoplay: true,
        autoplaySpeed: 4000,
        delay: 5000,
        speed: 700,
        responsive: [
            {
                breakpoint: 500,
                settings: "unslick"
            }
        ]
    });
}

slickify();
$(window).resize(function(){
    var $windowWidth = $(window).width();
    if ($windowWidth > 500) {
        slickify();   
    }
});

可以看到它正在处理这个 JS fiddle : http://jsfiddle.net/steveambielli/7weuyn4c/

您的实现中似乎出现了一些异常情况。实现其他 SO 问题的代码应该可以工作。如果您遇到特定错误或问题，请将其发布，我们可以进一步调试。