Question

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

我尝试了很多方法但没有一个成功。发生了各种各样的问题。

与我的目标最接近的代码段如下：

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();   
        }
    });

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

Here is the not-working prototype

Answer 1

您需要撤消filebeat.yml功能中执行的代码。你正在调用slickify()，所以它将执行。当窗口大小小于500时，您只需要添加一个else语句来执行不同的操作。

slickify();

编辑：

此应该正常工作。看起来你已经从这个SO问题中获取了工作代码：Enable and disable Slick Slider on certain break points

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();
    }
});

可以看到正在研究这个JS小提琴：http://jsfiddle.net/steveambielli/7weuyn4c/

您的实施中出现的某些内容会导致某些异常。从其他SO问题实现代码应该工作。如果您收到特定错误或问题，我们可以进一步调试。

Answer 2

我使用了这个片段：

         function slickify(){
            $('.goslick').slick({
                autoplay: false,
                speed: 300,
                slidesToShow: 1,
                slidesToScroll: 1
            });
          }

          $(window).resize(function(){
              var $windowWidth = $(document).width();
              if ($windowWidth < 500) {
                  slickify();   
              }else{
                  $('.goslick').slick("unslick");
              }
          });

请注意，我从window.resize中删除了slickify（）函数的调用，并用document.width替换了windows.width，以防止光滑加载错误返回页面或启动它第一次。

仅在某个窗口宽度下启用光滑，并在窗口宽度变大时禁用它

2 个答案:

编辑：