Edited at

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

More than 1 year has passed since last update.

自分用の備忘録として、、、。

オプションの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);