コンテンツスライダーに最適な万能カルーセルパネル「slick.js」
2021/01/26
狭い領域を効果的に活かせるコンテンツスライダーはよく案件に出てきます。高性能なカルーセルプラグイン「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 9 |
<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> |
オプション例
豊富なオプションが用意されています。
|
1 2 3 4 5 6 7 8 9 10 11 |
スライドのスピード【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/
