前端开发时slick轮播图unslick()和slickSetOption方法，解决自适应屏幕及更新属性的问题

在使用slick轮播图插件时，我们有时会有这种需求，
在某些屏幕分辨率下不使用轮播图效果，某些情况使用轮播图效果，
可以使用unslick方法，且这个方法须放入responsive中，
这样就可以确定在什么断点需要加载，哪些不需要加载。
使用方法如下。

<script>
    ('.slider').slick({
      
        slidesToShow: 5,
        slidesToScroll: 1,
        autoplay: false,
        autoplaySpeed: 2000,
        responsive: [
            {
      
                breakpoint: 9999,
                settings: "unslick"   //  在767px-9999px之间不会加载轮播图效果。
            },
            {
      
                breakpoint: 767,
                settings: {
      
                    slidesToShow: 3,
                    slidesToScroll: 3,
                    infinite: true,
                    dots: true
                }
            }
        ]
    });
script>

当然unslick()方法也可以直接移除对于slick轮播图的绑定效果。

<script>
    if ($(".slider").hasClass('slick-initialized')) {
      
        $(".slider").unslick();
    }
script>

在某些场景中，我们需要更新一些轮播图的属性，但是我们又不想去把轮播图销毁再重新出来一次，
slick插件内部有’slickSetOption’属性可供使用，更新轮播图的属性效果。

<script>

    //  旧的轮播图属性，现在我想更新一个新的属性，但是我又不想
    // 在这个方法内直接加，因为在实际开发中可能这个文件被很多其他
    // 文件引用，因此就需要slickSetOption来更新属性了。
    ('.slider').slick({
      
        slidesToShow: 5,
        slidesToScroll: 1,
        autoplay: false,
        autoplaySpeed: 2000
    });

    var responsiveVal = [
        {
      
            breakpoint: 768,
            settings:
            {
      
                autoplay: true
            }
        }, {
      
            breakpoint: 425,
            settings: {
      
                autoplay: true
            }
        }]

    // 对之前的slick轮播图效果进行更新
    $('.slider').slick(
        'slickSetOption',//slickSetOption属性
        'responsive',//responsive 自适应屏幕
        responsiveVal, // 断点的值   //需要注意的是，responsive这里需要添加的是一个数组对象，不是字符串。
        true  //如果是UI更新，请将refresh设置为true。
    );
script>

以上就是我对slick轮播图插件中，关于unslick()和slickSetOption方法的记录，欢迎大家分享交流

当然slick还有很多方法和属性值可以使用。
slick的官方文档：https://kenwheeler.github.io/slick/.