slickJS

最近までは、bxSliderが最強やねとか言ってましたが、ここにきて別プラグインに浮気しそうです。
その名も「slickJS」基本的にはbxSliderと変わらない？と思ってますが、どうなんでしょうね(๑´ڡ`๑)

前段階準備

プラグインとjQueryは言うまでもなく。
cssは[slick-theme.css][slick.css]の２つを読みこむようにしています。
このCSSは一式ある中から取りましょう。

一番簡単なものの実装方法

ここからよく使いそうな３パターンのデモを用意してみました。
ささーっと出来過ぎてしゅごい。
まずはシンプルなスライダー
特記事項はありません

$('.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
});