コンテンツスライダーに最適な万能カルーセルパネル「slick.js」
狭い領域を効果的に活かせるコンテンツスライダーはよく案件に出てきます。高性能なカルーセルプラグイン「slick.js」は使い勝手がいいです。
まずはデモをご覧ください。
サンプルデモ・ダウンロード
デモでは左右の矢印をCSSでオリジナルに変更しております。
特徴
主な特徴としては以下があげられます。
・レスポンシブデザインに対応
・スマホのスワイプやタッチに対応
・IEでも動作可能（IE8以上）
柔軟に幅広い要件に対応できそうです。
設置方法
上部で、CSS、JSを読込
|
1 2 3 4 |
<link rel="stylesheet" href="css/slick.css"> <link rel="stylesheet" href="css/slick-theme.css"> <script src="js/jquery-1.11.3.min.js"></script> <script src="js/jquery.slick.min.js"></script> |
続いてHTMLの記述、
|
1 2 3 4 5 6 7 8 |
<div class="carousel"> <div><img src="img/img01.jpg" alt=""></div> <div><img src="img/img02.jpg" alt=""></div> <div><img src="img/img03.jpg" alt=""></div> <div><img src="img/img04.jpg" alt=""></div> <div><img src="img/img05.jpg" alt=""></div> <div><img src="img/img06.jpg" alt=""></div> </div><!--//carousel--> |
最後に設定を記述します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<script type="text/javascript"> $('.carousel').slick({ speed: 600, //スライドのスピード（初期値：300） autoplay: true, //オート切り替え（初期値：false） autoplaySpeed: 3000, //オート切り替えのスピード（初期値：3000） dots: true, //黒ボッチ（ナビ）の表示（初期値：false） swipe: false, //スワイプを有効にする（初期値：true） useCSS: false, //CSSトランジションを有効にする（初期値：true） touchMove: false, //スワイプ中のスライダーの移動を有効にする（初期値：true） arrows: true, //矢印（ナビ）の有無（初期値：true） slidesToShow: 3, //表示する要素の数値（初期値：1） slidesToScroll: 3, //スライドで動かす要素の数値（初期値：1） infinite: true, //スライドループの有無（初期値：true） }); </script> |
オプション例
豊富なオプションが用意されています。
スライドのスピード【speed: 600 】（初期値：300）
オート切り替え【autoplay: true 】（初期値：false）
オート切り替えのスピード【autoplaySpeed: 3000 】（初期値：3000）
黒ボッチ（ナビ）の表示【dots: true 】（初期値：false）
スワイプを有効にする【swipe: false 】（初期値：true）
CSSトランジションを有効にする【useCSS: false 】（初期値：true）
スワイプ中のスライダーの移動を有効にする【touchMove: false 】（初期値：true）
矢印（ナビ）の有無【arrows: true 】（初期値：true）
表示する要素の数値【slidesToShow: 3 】（初期値：1）
スライドで動かす要素の数値【slidesToScroll: 3 】（初期値：1）
スライドループの有無【infinite: true 】（初期値：true）
詳しくは下記サイト等ご参考ください。
配布サイト
http://kenwheeler.github.io/slick/
参考サイト
http://cly7796.net/wp/javascript/plugin-slick/
http://emiac-works.com/coding/jquery/js-carousel-slick/