コンテンツスライダーに最適な万能カルーセルパネル「slick.js」

      2019/05/19

コンテンツスライダーに最適な万能カルーセルパネル「slick.js」

狭い領域を効果的に活かせるコンテンツスライダーはよく案件に出てきます。高性能なカルーセルプラグイン「slick.js」は使い勝手がいいです。

まずはデモをご覧ください。

サンプルデモ・ダウンロード

デモでは左右の矢印をCSSでオリジナルに変更しております。

特徴

主な特徴としては以下があげられます。

・レスポンシブデザインに対応
・スマホのスワイプやタッチに対応
・IEでも動作可能(IE8以上)

柔軟に幅広い要件に対応できそうです。

設置方法

上部で、CSS、JSを読込

<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の記述、

<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–>

最後に設定を記述します。

<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/

サンプルデモ・ダウンロード