在桌面端取消/隐藏Slick幻灯片是否有可能，但在移动设备上使用Slick显示？

Question

我如何在桌面分辨率上禁用滑块，但在移动设备上显示它？以下代码只允许相反的操作：

$('.slider').slick({
     slidesToShow: 5,
     slidesToScroll: 1,
     autoplay: false,
     autoplaySpeed: 2000,
     responsive: [
        {
           breakpoint: 767,
           settings: "unslick"
        }
     ]
  });

- Shahadat

---

这就是你应该做的。你有什么问题？ - hering

桌面版本将显示滑块内容，但不会滑动，在767像素以下的屏幕上将作为幻灯片运行。 - Shahadat

Answer 1

比目前被接受的答案更加简洁的解决方案：添加mobileFirst: true,选项：

$('.slider').slick({
     slidesToShow: 5,
     slidesToScroll: 1,
     autoplay: false,
     autoplaySpeed: 2000,
     mobileFirst: true,
     responsive: [
        {
           breakpoint: 767,
           settings: "unslick"
        }
     ]
  });

这将按照设计意图从低分辨率开始解释您的断点设置。

请参阅Slick文档中的设置部分。

- Tobias Geisler

---

仍然在window.resize上给我一个错误：TypeError: b.$slides is null。 - Archana Sharma

好的答案，唯一的问题是如果屏幕变小到应该出现滑块的位置，它不会变成滑块，在旋转手机等情况下可能会发生这种情况。 - BritishSam

当手动调整桌面浏览器的屏幕大小时，与@BritishSam相同，如果屏幕变小，它不会自动转换为滑块。必须刷新页面来初始化滑块。但是，当从移动设备尺寸调整到桌面尺寸时，它会禁用滑块。 - maiakd

@maiakd 我最后使用了这个方法，并在调整大小时重新初始化Slick，使用防抖函数以避免频繁操作。 - BritishSam

Answer 2

尝试这样做：屏幕宽度9999像素到768像素不会是滑块

('.slider').slick({
    slidesToShow: 5,
    slidesToScroll: 1,
    autoplay: false,
    autoplaySpeed: 2000,
    responsive: [
        {
            breakpoint: 9999,
            settings: "unslick"
        },
        {
            breakpoint: 767,
             settings: {
                    slidesToShow: 3,
                    slidesToScroll: 3,
                    infinite: true,
                    dots: true
                }
        }
    ]
});

- Wenping Guo

---

请参考@Tobias Geisler的答案，以获取更好的解决方案 https://dev59.com/ZVgQ5IYBdhLWcg3wPxnb#48641847 - CamelCode

“mobilefirst: true” 是链接答案中的关键区别。 - Pixelsmith

Answer 3

很遗憾，我的#user1506075版本出现了错误。我通过以下方式解决了这个问题：

 $slickGreen = false;
    function greenSlider(){    
        if($(window).width() < 991){
            if(!$slickGreen){
                $(".greenSlider").slick({
                    dots: false,
                    arrows: false,
                    slidesToShow: 3,
                    slidesToScroll: 1
                });
                $slickGreen = true;
            }
        } else if($(window).width() > 992){
            if($slickGreen){
                $('.greenSlider').slick('unslick');
                $slickGreen = false;
            }
        }
    };

    $(document).ready(function(){
        ....
        greenSlider();
    });
    $(window).on('resize', function(){
         ....
         greenSlider();
    });

- Николай Пушкин

---

这对我来说最好用，因为所接受的解决方案在某些情况下并不适用。如果我们在“767”处设置断点，并在其上方取消滑动它，假设设备宽度为375x812。 更改方向为横向（> 767）后，我们将其“取消滑动”，再次更改方向为纵向（<767），滑块就无法使用了。谢谢@ Николай普希金。 - TechYogi

仍然在窗口调整大小时给我一个错误：TypeError: b.$slides is null。 - Archana Sharma

在我看来，这应该是被选中的答案。它是唯一一个可以动态考虑屏幕尺寸变化的解决方案。比如说你想让滑块在移动设备/较小屏幕上仍然能够正常工作，并且你需要在slicked/unslicked之间反复调整大小。 - gBasgaard

Answer 4

我曾经遇到类似的问题，并使用 enquire.js 解决了它（这是一个轻量级的纯 JavaScript 库，用于响应 CSS 媒体查询，大小约为 0.8kb）

基于这个 GitHub 线程的讨论，特别是 这条评论，我使用 enquire.js 实现了解决方案：

$slider = $('#your-slider');

enquire.register('screen and (max-width: 767px)', {
  match : function() {
    if ( !$slider.hasClass('slick-initialized') ) {
      $slider.slick(SliderSettings);
    }
  }, 
  unmatch : function() {
    if ( $slider.hasClass('slick-initialized') ) {
      $slider.slick('unslick');
    }
  }
});

其中SliderSettings是选项映射，就像您的情况一样：

{
 slidesToShow: 5,
 slidesToScroll: 1,
 autoplay: false,
 autoplaySpeed: 2000
}

- Oksana Romaniv

Answer 5

优雅地编译所有答案。Codepen

// setup
var sliderElem = $(".slider"),
    sliderBool = false,
    sliderBreakpoint = 670,
    sliderSettings = {
        arrows: false,
        dots: true,
        autoplaySpeed: 3000,
        mobileFirst: true,
        responsive: [
            {
                breakpoint: sliderBreakpoint,
                settings: "unslick"
            }
        ]
    };
function sliderInit() {
    if (window.innerWidth <= sliderBreakpoint) {
        if (sliderBool == false) {
            sliderElem.slick(sliderSettings);
            sliderBool = true;
        }
    } else {
        sliderBool = false;
    }
}

// resize
$(window).resize(function () {
    sliderInit();
});

- Arsen Chudinov

Answer 6

将您的代码放在以下类似的if语句中：

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
 $('.slider').slick({
     slidesToShow: 5,
     slidesToScroll: 1,
     autoplay: false,
     autoplaySpeed: 2000,
     responsive: [
        {
           breakpoint: 767,
           settings: "unslick"
        }
     ]
  });
}

参考链接：link

- Rana Ghosh

Answer 7

$('.slider').slick({
     slidesToShow: 5,
     slidesToScroll: 1,
     autoplay: false,
     autoplaySpeed: 2000,
     mobileFirst: true,
    responsive: [
      {
          breakpoint: 767,
          settings: "unslick"
      }
  ]
});
$(window).resize(function(){
  $('.slider').slick('unslick')
  $('.slider').slick({
     slidesToShow: 5,
     slidesToScroll: 1,
     autoplay: false,
     autoplaySpeed: 2000,
     mobileFirst: true,
    responsive: [
      {
          breakpoint: 767,
          settings: "unslick"
      }
  ]
});
});

- 曾瀚慶