jQueryプラグイン「slick」 レスポンシブなスライダーを実現
jQueryプラグイン「slick」の紹介です、このプラグインのサブタイトルは「the last carousel you'll ever need.」直訳すると「あなたが必要とするであろう最後のカルーセル」ということになります、 オプションの豊富さなどもみて納得いくサブタイトルであると実感しております。レスポンシブ系のサイトを作っているサイトのソースを拝見するとこちらのプラグインを使用がもちらほらと見受けられます。slick -使用方法-
公式サイトよりソースコードをダウンロード
cssとjsの読み込み
|
1 2 3 4 |
<link rel="stylesheet" type="text/css" href="slick/slick.css"/> <link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <script type="text/javascript" src="slick/slick.min.js"></script> |
スライドさせるコンテンツを作成
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<div class="wrap"> <ul class="slider multiple-item"> <li><img src="img/001.jpg" alt=""></li> <li><img src="img/002.jpg" alt=""></li> <li><img src="img/003.jpg" alt=""></li> <li><img src="img/004.jpg" alt=""></li> <li><img src="img/005.jpg" alt=""></li> <li><img src="img/007.jpg" alt=""></li> <li><img src="img/001.jpg" alt=""></li> <li><img src="img/002.jpg" alt=""></li> <li><img src="img/003.jpg" alt=""></li> <li><img src="img/004.jpg" alt=""></li> <li><img src="img/005.jpg" alt=""></li> <li><img src="img/007.jpg" alt=""></li> <li><img src="img/001.jpg" alt=""></li> <li><img src="img/002.jpg" alt=""></li> <li><img src="img/003.jpg" alt=""></li> <li><img src="img/004.jpg" alt=""></li> <li><img src="img/005.jpg" alt=""></li> <li><img src="img/007.jpg" alt=""></li> </ul> </div><!-- / .wrap --> |
スライドさせるスクリプトを記述
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
$(function() { $('.multiple-item').slick({ infinite: true, dots:true, slidesToShow: 6, slidesToScroll: 5, responsive: [{ breakpoint: 640, settings: { slidesToShow: 3, slidesToScroll: 3, } } ] }); }); |
便利なオプション
|
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 |
$('.slider').slick({ // アクセシビリティ。左右ボタンで画像の切り替えをできるかどうか accessibility: true, // 自動再生。trueで自動再生される。 autoplay: false, // 自動再生で切り替えをする時間 autoplaySpeed: 3000, // 自動再生や左右の矢印でスライドするスピード speed: 400, // 自動再生時にスライドのエリアにマウスオンで一時停止するかどうか pauseOnHover: true, // 自動再生時にドットにマウスオンで一時停止するかどうか pauseOnDotsHover: true, // 切り替えのアニメーション。ease,linear,ease-in,ease-out,ease-in-out cssEase: 'ease', // 画像下のドット（ページ送り）を表示 dots: false, // ドットのclass名をつける dotsClass: 'dot-class', // ドラッグができるかどうか draggable: true, // 切り替え時のフェードイン設定。trueでon fade: false, // 左右の次へ、前へボタンを表示するかどうか arrows: true, // 無限スクロールにするかどうか。最後の画像の次は最初の画像が表示される。 infinite: true, // 最初のスライダーの位置 initialSlide: 0, // 画像の遅延表示。‘ondemand’or'progressive' lazyLoad: ‘ondemand’, // スライドのエリアにマウスオーバーしている間、自動再生を止めるかどうか。 pauseOnHover: true // スライドのエリアに画像がいくつ表示されるかを指定 slidesToShow: 4, // 一度にスライドする数 slidesToScroll: 1, // タッチスワイプに対応するかどうか swipe: true, // 縦方向へのスライド vertical: false, // 表示中の画像を中央へ centerMode: true, // 中央のpadding centerPadding: '160px' }); |