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

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


##記述方法 JavaScript(ES6)

```js

(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）

```js

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