バリエーション豊富で安定感抜群！スライダープラグイン slick
Javascript・プラグイン
いくつかスライダーのプラグインを利用させてもらってますが、導入が比較的簡単でカスタマイズもしやすく、レスポンシブにも対応しているslick.jsが使いやすいのでご紹介させていただきます。
slickをダウンロード
まずはslickをダウンロードしまししょう。
slickを設定する
cssとjsファイルを読み込む設定をします。
|
1 2 3 4 5 6 7 8 |
<head> <meta charset="utf-8"> … <link rel="stylesheet" href="css/slick.css"> <link rel="stylesheet" href="css/slick-theme.css"> <link rel="stylesheet" href="css/style.css"> </head> |
|
1 2 3 4 5 6 |
… <script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script src="js/slick.min.js"></script> </body> </html> |
slickを表示してみよう
任意のclass名を指定してfuncitonを記述するだけで表示されます。
|
1 2 3 4 5 6 7 8 9 10 11 |
<ul class="slider-normal"> <li><a href="#"><img src="img/img1.jpg"></a></li> <li><a href="#"><img src="img/img2.jpg"></a></li> <li><a href="#"><img src="img/img3.jpg"></a></li> <li><a href="#"><img src="img/img4.jpg"></a></li> </ul> … $(function(){ $('.slider-normal').slick(); }); |
矢印の位置や色などはスタイルで変更可能です。※slick.cssではなく、サイトで読み込むcssに記述してcssをあて直すほうが効率がよく、管理もしやすいと思います。
豊富なバリエーション（オプション）で多彩な表現を実現しよう！
コンテンツの内容によって画面いっぱいに表示したいときや、サムネイルを出したいとき、キャプションをつけたいとき、PCとスマホで表示数を変えたいときなど、さまざまな要望に答えてくれる豊富なオプションが用意されています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 |
$('.slider-normal').slick({ // 矢印の表示・非表示 [初期値:true] accessibility: true, // 高さの自動調整 [初期値:false] adaptiveHeight: false, // 自動再生 [初期値:false] autoplay: true, // 自動再生の切り替えタイミング（ミリ秒） [初期値:3000] autoplaySpeed: 3500, // pre、nextボタン表示・非表示 [初期値:true] arrows: true, // 矢印ボタンの生成位置を変更 [初期値:$('.my-slide)] appendArrows: $('.my-slide'), // ドットナビゲーションの生成位置を変更 [初期値:$('.my-slide)] appendDots: $('.my-slide'), // 前ボタンの要素を変更 [初期値:'<button type="button" class="slick-prev">Previous</button>'] prevArrow: '<a class="slick-prev" href="#">前へ</a>', // 次ボタンの要素を変更 [初期値:'<button type="button" class="slick-next">Next</button>'] nextArrow: '<a class="slick-next" href="#">次へ</a>', // slidesToShowが奇数のとき、現在のスライドを中央に表示するか [初期値:false] centerMode: false, // centerMode:trueのとき、左右のスライドをチラ見せさせる幅 [初期値:'50px'] centerPadding: '60px', // ease-in,ease-in-outなどCSSのイージング [初期値:'ease'] cssEase: 'linear', // ドットナビゲーション表示・非表示 [初期値:false] dots: false, // ドットナビゲーションのクラス名を変更 [初期値:slick-dots] dotsClass: 'my-dots', // スライド切り替えをフェードするか [初期値:false] fade: false, // クリックでメインのスライドを切り替えるか focusOnSelect: true, // スライドをループさせるか [初期値:true] infinite: false, // 開始スライド（0から始まるので注意） [初期値:0] initialSlide: 2, // 画像の遅延表示タイプ（ondemand/progressive) [初期値:'ondemand'] lazyLoad: 'ondemand', // autoplay:trueのとき、マウスフォーカスしたら一時停止させるか [初期値:true] pauseOnFocus: true, // autoplay:trueのとき、マウスホバーしたら一時停止させるか [初期値:true] pauseOnHover: true, // autoplay:trueのとき、ドットナビゲーションをマウスホバーしたら一時停止させるか [初期値:false] pauseOnDotsHover: false, // レスポンシブ設定の基準（window/slider/min） [初期値:'window'] respondTo: 'window', // レスポンシブ設定 responsive: [ { breakpoint: 1024, // 600〜1023px settings: { slidesToShow: 3, slidesToScroll: 3, infinite: true, dots: true } }, { breakpoint: 600, // 480〜599px settings: { slidesToShow: 2, slidesToScroll: 2 } }, { breakpoint: 480, // 〜479px settings: { slidesToShow: 1, slidesToScroll: 1 } } ], // 行数 [初期値:1] rows: 1, // スライド部分の要素のタグ名 [初期値:''] slide: 'div', // rowsの値が2以上のとき、1行あたりに表示させるスライド数 [初期値:1] slidesPerRow: 2, // 表示させるスライド数 [初期値:1] slidesToShow: 2, // 一度に移動させるスライド数 [初期値:1] slidesToScroll: 2, // スライド/フェードさせるスピード（ミリ秒） [初期値:300] speed: 400, // スワイプを検知するか [初期値:true] swipe: true, // タッチでスライドさせるか [初期値:true] touchMove: true, // CSSのtransitionを使用するか [初期値:true] useCSS: true, // CSSのtransformを使用するか [初期値:true] useTransform: true, }); |
※下記サイトを参考にさせていただきました。ありがとうございます。
