jQueryプラグインのslickを試してみる
slick - the last carousel you'll ever need http://kenwheeler.github.io/slick/
※今回はバージョン1.3.15を使用。
設置
ファイルを下記のような感じで設置。
├ HTMLファイル ├ fonts │├ slick.eot │├ slick.svg │├ slick.ttf │└ slick.woff ├ img │├ 001.png │├ 002.png │└ ・・・ ├ slick.css └ slick.min.js
基本
基本的には下記のような感じでHTMLを書く。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <link href="slick.css" rel="stylesheet"> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> <script src="slick.min.js"></script> <script> $(function(){ $('.slides').slick({ dots: true }); }); </script> </head> <body> <div class="slides"> <div><img src="img/001.png" /></div> <div><img src="img/002.png" /></div> <div><img src="img/003.png" /></div> <div><img src="img/004.png" /></div> <div><img src="img/005.png" /></div> <div><img src="img/006.png" /></div> <div><img src="img/007.png" /></div> <div><img src="img/008.png" /></div> <div><img src="img/009.png" /></div> <div><img src="img/010.png" /></div> </div> </body> </html>
カルーセル
スライドの数を指定するとカルーセルな感じになる。
$('.slides').slick({ dots: true, slidesToShow: 3, slidesToScroll: 3 });
センタリング
centerModeをtrueにすると、画像をセンターにもってこれる。
$('.slides').slick({ dots: true, slidesToShow: 3, centerMode: true });
サムネイル
サムネイル付きにする場合は、下記のような感じ。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <link href="slick.css" rel="stylesheet"> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> <script src="slick.min.js"></script> <script> $(function(){ $('.slides').slick({ fade: true, asNavFor: '.slider-nav' }); $('.slides-nav').slick({ dots: true, slidesToShow: 5, centerMode: true, focusOnSelect: true, asNavFor: '.slides', }); }); </script> </head> <body> <div class="slides"> <div><img src="img/001.png" /></div> <div><img src="img/002.png" /></div> <div><img src="img/003.png" /></div> <div><img src="img/004.png" /></div> <div><img src="img/005.png" /></div> <div><img src="img/006.png" /></div> <div><img src="img/007.png" /></div> <div><img src="img/008.png" /></div> <div><img src="img/009.png" /></div> <div><img src="img/010.png" /></div> </div> <div class="slides-nav"> <div><img src="img/001.png" width="200" /></div> <div><img src="img/002.png" width="200" /></div> <div><img src="img/003.png" width="200" /></div> <div><img src="img/004.png" width="200" /></div> <div><img src="img/005.png" width="200" /></div> <div><img src="img/006.png" width="200" /></div> <div><img src="img/007.png" width="200" /></div> <div><img src="img/008.png" width="200" /></div> <div><img src="img/009.png" width="200" /></div> <div><img src="img/010.png" width="200" /></div> </div> </body> </html>