[slick.js]レスポンシブなスライダー「slick」の機能「unslick」を使ってスマホのみ縦積みにする - Qiita
自分用の備忘録として、、、。 オプションの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 mainVisualSli
![[slick.js]レスポンシブなスライダー「slick」の機能「unslick」を使ってスマホのみ縦積みにする - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/aac574235ba9d00b5d8e5e088b8100eef25e6732/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCc2xpY2suanMlNUQlRTMlODMlQUMlRTMlODIlQjklRTMlODMlOUQlRTMlODMlQjMlRTMlODIlQjclRTMlODMlOTYlRTMlODElQUElRTMlODIlQjklRTMlODMlQTklRTMlODIlQTQlRTMlODMlODAlRTMlODMlQkMlRTMlODAlOENzbGljayVFMyU4MCU4RCVFMyU4MSVBRSVFNiVBOSU5RiVFOCU4MyVCRCVFMyU4MCU4Q3Vuc2xpY2slRTMlODAlOEQlRTMlODIlOTIlRTQlQkQlQkYlRTMlODElQTMlRTMlODElQTYlRTMlODIlQjklRTMlODMlOUUlRTMlODMlOUIlRTMlODElQUUlRTMlODElQkYlRTclQjglQTYlRTclQTklOEQlRTMlODElQkYlRTMlODElQUIlRTMlODElOTklRTMlODIlOEImdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZzPTQ2NWRmNmE0NDg0YTQ4NzEzMTNjYjBlNzJlYWM4ZGJm%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBzLWthdG8mdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPWM3MjMxZjQ2ZDRhMmFjN2FjOWVhZjBjM2UwNjc0NGQx%26blend-x%3D142%26blend-y%3D436%26blend-mode%3Dnormal%26txt64%3DaW4g5qCq5byP5Lya56S-44Ki44Oz44OG44Kj44O844O744OV44Kh44Kv44OI44Oq44O8%26txt-width%3D770%26txt-clip%3Dend%252Cellipsis%26txt-color%3D%2523212121%26txt-font%3DHiragino%2520Sans%2520W6%26txt-size%3D36%26txt-x%3D156%26txt-y%3D536%26s%3Df5e3683647643d38abd0f348dc536402)
slick - the last carousel you'll ever need
Features Fully responsive. Scales with its container. Separate settings per breakpoint Uses CSS3 when available. Fully functional when not. Swipe enabled. Or disabled, if you prefer. Desktop mouse dragging Infinite looping. Fully accessible with arrow key navigation Add, remove, filter & unfilter slides Autoplay, dots, arrows, callbacks, etc... Single Item
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://blog.mismithportfolio.com/web/20150618flickity
https://blog.mismithportfolio.com/web/20150917slickjs
