chrome firefox IE safari chain youtube-play pocket hatena facebook feedly github google-plus rss twitter search code envelope-o home pencil website works calendar drawer tag

ブログ移転のお知らせ

当ブログは新ブログ「DEV.NISMIT」に移転しました。それに伴い、ドメインも全てリニューアルしました。

お手数ですが、ブックマーク、Feedly等の変更をお願いします。当ブログは数ヶ月を目安にリダイレクト、削除します。

2015/01/26

[jQuery]レスポンシブ対応!多機能カルーセルプラグイン「slick.js」

レスポンシブ対応、オートプレイ、無限ループ、Public Method、callback等、大抵使用する機能はほぼ実装されており、非常に扱いやすいカルーセルプラグイン「slick.js」をご紹介致します。CSS3を使用しない通常のスライドであればIE8も対応してマス。ライセンスはMITライセンスとなっております。

万能カルーセルプラグイン

案件でよく使用していたカルーセル/スライドショー機能を持ったjQueryプラグインが、

ある限定的な条件でうまく動作しなかったので、代わりのカルーセルプラグインを探していました。

そこで見つけたのがコリスさんで紹介されていた、この万能カルーセルプラグイン「slick.js」です。

非常に良かったので、ご紹介。

案件で使う、必要な機能としてはほぼ実装されていると思います。

機能

  • レスポンシブ対応
  • スワイプ/マウスドラッグ
  • オートプレイ
  • 無限ループ
  • 画像のlazyload
  • public method
  • call back(init時/スライド前・後 等)

ここまでの機能があれば、ほぼ対処出来るかと思います。

CSS3を使用しない通常のスライド動作であれば、IE8でも動作します:)

使用方法

slick.jsのサイトよりプラグインのダウンロードをします。

css,jsの読み込み

<link rel="stylesheet" href="common/css/slick.css" media="all">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="common/js/slick.min.js"></script>

script

$('.slide_selector').slick({
  slidesToShow: 4, //スライドが見える数
  slidesToScroll: 1, //スライドがスクロールする数
  infinite: true, //無限スクロール
  draggable: false //マウスドラッグでのスクロール
 });
<div class="slide_selector">
 <div>
  <!-- スライドの中身1 -->
 </div>
 <div>
  <!-- スライドの中身2 -->
 </div>
</div>

その他の設定一覧

ざっくりと分かる範囲でまとめました。

 

オプション名 デフォルト 説明
accessibility bool true 左右のナビゲーションの有効/無効
autoplay bool false オートプレイの有効/無効
autoplaySpeed int 3000 スライドが切り替わる時間(ms)
cssEase string ‘ease’ CSS3でのアニメーション
(ease,linear,ease-in,ease-out,ease-in-out)
dots bool false カレント表示のナビゲーション
dotsClass string ‘slick-dots’ カレント表示のナビゲーションのクラス名
draggable bool true ドラッグの有効/無効
easing string ‘linear’ jQueryのanimate()でのアニメーションタイプ
fade bool false フェードインでの表示の有効/無効
arrows bool true 前へ/次へナビゲーションの有効/無効
appendArrows string $(element) 前へ/次へナビをカスタムで追加する
appendDots string $(element) カレント表示ナビをカスタムで追加する
prevArrow html html buttonタグ 前へボタンをカスタムする
nextArrow html html buttonタグ 次へボタンをカスタムする
infinite bool true 無限ループの有効/無効
initialSlide int 0 最初のスライド位置
lazyLoad string ‘ondemand’ 画像の遅延ロード
onBeforeChange(this, currentIndex,targetIndex) method null メソッド スライドする前に実行
onAfterChange(this, index) method null メソッド スライドした後に実行
onInit(this) method null メソッド 初期化した際に実行
onReInit(this) method null メソッド 初期化メソッドを実行した後にこちらのメソッドが実行
pauseOnHover bool true スライドにホバーした際に自動再生を止める 有効/無効
responsive obj null どの時点でレスポンシブ表示するかのブレークポイントを設定
slide string div スライドする要素を変更
slidesToShow int 1  いくつスライドが見えている状態にするか
slidesToScroll int 1 スライドする数
speed int 300 スライドアニメーションの時間(ms)
swipe bool true タッチスワイプの有効/無効
swipeToSlide bool false スライドする数に関係なくスワイプの有効/無効
touchMove bool true タッチでスライドの有効/無効
useCSS bool true CSS Transitionsの有効/無効
vertical bool false 縦方向のスライドの有効/無効
rtl bool false 右から左へスライド方向の変更の有効/無効

 

いくつかの案件で使用してみて、安定した動作をしていました!

その他オプション等はslick.jsのサイトに掲載されております。

参考サイト

slick :  http://kenwheeler.github.io/slick/

Github:  https://github.com/kenwheeler/slick/

[JS]レスポンシブにも対応した使いやすいカルーセルを探す時はこのスクリプトがオススメ! -slick | コリス

( http://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-slick.html )

今後の励みになりますので、良かったらシェアをお願いします。

このエントリーをはてなブックマークに追加