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

   

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

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

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

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

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

特徴

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

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

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

設置方法

上部で、CSS、JSを読込

続いてHTMLの記述、

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

オプション例

豊富なオプションが用意されています。

スライドのスピード【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/

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