[slick.js]レスポンシブなスライダー「slick」の機能「unslick」を使ってスマホのみ縦積みにする

自分用の備忘録として、、、。
オプションのbreakpointでsettings: 'unslick'だけ設定しても、
スマホからPCサイズにリサイズしたとき、上手く切り替えることができません。
以下の方法で、スマホの場合はカルーセルを解除して縦積みに、
PCサイズの場合はイベントを再登録することができます。
記述はES6とES5の記述で分けています。

記述方法 JavaScript(ES6)

(function($) {
    const NAMESPACE = window.NAMESPACE || {};
    NAMESPACE.XXXX = function() {
        let $win = $(window);

        const _init = function() {
            $(function(){
                mainVisualSlider.init();
            });
        };

        const mainVisualSlider = function(){
            let $jsSlider = $('.js_slider');
            let slickStartupFlg = false;

            const _init = function(){
                _setPlugin();
                _event();
                _bind();
            };

            const _bind = function(){
                $win.on('resize', _setPlugin);
            };

            const _setPlugin = function(){
                if(window.innerWidth > 767 && !slickStartupFlg){
                    slickStartupFlg = true;
                    if ($(".slick-initialized").length) {
                            $jsSlider.slick('unslick');
                    }
                    $jsSlider.slick({
                        centerMode: true,
                        centerPadding: '60px',
                        dots: true,
                        arrows: false,
                        speed: 1000,
                        autoplay: true,
                        autoplaySpeed: 5000,
                        // fade: true,
                        slidesToShow: 1,
                        pauseOnFocus: false,
                        pauseOnHover: false,
                        cssEase: 'linear',
                        variableWidth: true,
                        infinite: true,
                        responsive: [
                            {
                                breakpoint: 767,
                                settings: 'unslick'
                            }
                        ]
                    });
                } else if(window.innerWidth < 767 && slickStartupFlg){
                    slickStartupFlg = false;
                    if ($(".slick-initialized").length) {
                            $jsSlider.slick('unslick');
                    }
                }
            };

            const _event = function () {
                $jsSlider.on('beforeChange', function(event, slick, currentSlide, nextSlide){
                    //スライド切替時の処理
                    console.log('切り替え');
                });
            };

            return {
                init: _init
            }
        }();


        return {
            init: _init
        }
    }().init();
})(jQuery);

記述方法 JavaScript（ES5）

(function ($) {
    var NAMESPACE = window.NAMESPACE || {};
    NAMESPACE.XXXX = function () {
        var $win = $(window);

        var _init = function _init() {
            $(function () {
                mainVisualSlider.init();
            });
        };

        var mainVisualSlider = function () {
            var $jsSlider = $('.js_slider');
            var slickStartupFlg = false;

            var _init = function _init() {
                _setPlugin();
                _event();
                _bind();
            };

            var _bind = function _bind() {
                $win.on('resize', _setPlugin);
            };

            var _setPlugin = function _setPlugin() {
                if (window.innerWidth > 767 && !slickStartupFlg) {
                    slickStartupFlg = true;
                    if ($(".slick-initialized").length) {
                        $jsSlider.slick('unslick');
                    }
                    $jsSlider.slick({
                        centerMode: true,
                        centerPadding: '60px',
                        dots: true,
                        arrows: false,
                        speed: 1000,
                        autoplay: true,
                        autoplaySpeed: 5000,
                        // fade: true,
                        slidesToShow: 1,
                        pauseOnFocus: false,
                        pauseOnHover: false,
                        cssEase: 'linear',
                        variableWidth: true,
                        infinite: true,
                        responsive: [{
                            breakpoint: 767,
                            settings: 'unslick'
                        }]
                    });
                } else if (window.innerWidth < 767 && slickStartupFlg) {
                    slickStartupFlg = false;
                    if ($(".slick-initialized").length) {
                        $jsSlider.slick('unslick');
                    }
                }
            };

            var _event = function _event() {
                $jsSlider.on('beforeChange', function (event, slick, currentSlide, nextSlide) {
                    //スライド切替時の処理
                    console.log('切り替え');
                });
            };

            return {
                init: _init
            };
        }();

        return {
            init: _init
        };
    }().init();
})(jQuery);