slickJS
最近までは、bxSliderが最強やねとか言ってましたが、ここにきて別プラグインに浮気しそうです。
その名も「slickJS」基本的にはbxSliderと変わらない?と思ってますが、どうなんでしょうね(๑´ڡ`๑)
前段階準備
プラグインとjQueryは言うまでもなく。
cssは[slick-theme.css][slick.css]の2つを読みこむようにしています。
このCSSは一式ある中から取りましょう。
一番簡単なものの実装方法
ここからよく使いそうな3パターンのデモを用意してみました。
ささーっと出来過ぎてしゅごい。
まずはシンプルなスライダー
特記事項はありません
$('.slickSlide1').slick({ slidesToShow: 2, //スライドが見える数 slidesToScroll: 1, //スライドがスクロールする数 infinite: true, //無限スクロール });
左右チラッとなんか見えてるスライダー
ピッタリ切れているのではなく、前後ちょっとだけチラ見しているパターン
$('.slickSlide2').slick({ slidesToShow: 2, //スライドが見える数 slidesToScroll: 1, //スライドがスクロールする数 infinite: true, //無限スクロール centerMode: true, // trueにすることで左右チラ見できる });
上下連動版
下でサムネイルクルクル回して、上で大きな画像を見せたい場合
便利よねぇーーーーーー!!!
$('.slickSlide3').slick({ slidesToShow: 1, slidesToScroll: 1, arrows: false, fade: true, asNavFor: '.slickSlide3Under'// 連動させたい相方指定 }); $('.slickSlide3Under').slick({ slidesToShow: 3, slidesToScroll: 1, asNavFor: '.slickSlide3',// 連動させたい相方指定 dots: true, centerMode: true, focusOnSelect: true });
その他オプション
本家サイトのsetting項目を見れば
言葉でなんとなく何がしたいのかは分かる。不親切な気はするけど、他もやってることだし。ご勘弁
色んなパターンのスライドでも作ってみますか。
画像をさ、マウスオーバーで拡大したいねん
ECサイトでよくある感じの動きですね。
マウスオーバーでの拡大に関しては別途プラグインを使いたいと思います。
// メソッドを利用する時はslick外、slick指定前に記述しないと動かないので注意 $('.slickSlide4').on('init',function(){ $(".slickSlide4").find('img').imagezoomsl({ zoomrange: [3, 3] }); }); $('.slickSlide4').slick({ slidesToShow: 1, slidesToScroll: 1, arrows: false, fade: true, asNavFor: '.slickSlide4Under'// 連動させたい相方指定 }); $('.slickSlide4Under').slick({ slidesToShow: 3, slidesToScroll: 1, asNavFor: '.slickSlide4',// 連動させたい相方指定 dots: true, centerMode: true, focusOnSelect: true });