【问题标题】:Switch vertical carousel (desktop) to horizontal carousel in mobile将垂直轮播(桌面)切换到移动设备中的水平轮播
【发布时间】:2016-10-28 15:10:23
【问题描述】:

他们知道一个插件可以让我在移动设备上将垂直(桌面视图)轮播更改/转换为水平轮播?

现在我正在使用 slick 插件,但我无法得到我需要的结果,这是我的 JS 代码:

          $('.demo-slider).slick({
                      vertical: true;
                    });
           var windowWidth = $(window).width();
              if(windowWidth < 768){
                  $('.demo-slider').slick('unslick',function(){
                   $('.demo-slider).slick({
                      vertical: false;
                    });
                });
           }

【问题讨论】:

    标签: javascript jquery transform carousel slick.js


    【解决方案1】:
    $('.demo-slider).slick({    
    vertical: true,
    responsive: [               
    {
        breakpoint: 767,
        settings: {
        vertical: false
        }
    }]
    });
    

    Slick 有自己的响应断点。这样会好很多

    【讨论】:

      【解决方案2】:

      我认为你出错的地方是你初始化 slick() 两次(你也忘记在你的 jQuery 选择器上关闭 ')。我会将虚假媒体查询切换到 slick() 的初始化之外,如下所示:

      // 1- Get window width 
      var windowWidth = $(window).width();
      
      // 2- For all devices under or at 768px, use horizontal orientation
      if(windowWidth <= 768) {
        $('.demo-slider').slick({
          vertical: false,
        });
      } 
      // 3- For all devices over 768px, use vertical orientation
      else {
        $('.demo-slider').slick({
          vertical: true,
        });
      }
      

      *注意,我从来没有使用过 slickslider,只是看你的 JS。

      【讨论】:

      • 而不是 vertical: true; 必须是 vertical: true,
      • 这是一个糟糕的答案,不要使用这个答案,below 答案是正确的解决方案。
      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2020-01-22
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多