サイトでよく見るスライダーやカルーセルですが、よく使うパーツなので常に使うプラグインを1つ決めておきたいものです。
そこでおすすめなのが「slick」というプラグインです。
(サブタイトルに”あなたが必要とする最後のカルーセル”と謳っているほどです)
シンプルでカスタマイズしやすく、スマホのスワイプ操作の対応もしているのでレスポンシブデザインには持ってこいです。
カルーセルとは? スライダー、クロスフェードとの違いは?
カルーセルというのはグループ化されている画像やテキストなどの情報をスライドなどで表示させる表現手法です。
carousel(カルーセル)は日本語で「回転木馬」という意味のようです。
よく「スライダー」や「クロスフェード」などというワードがありますが、
内容の移し方(スライドさせるのか、フェードさせるのか…)の違いだけなので、カルーセルとほぼ同じ意味と考えていいと思います。
クロスフェードの作り方はこちら
使い方
まずslickからデータ一式をダウンロードしてください。
ページ下にある「Download Now」のボタンかGithubからダウンロードできます。
外部ファイルの設置
<head> // headタグ内にslick.cssを追加 <link rel="stylesheet" type="text/css" href="slick/slick.css"/> // デフォルトのスタイリングをしたい場合は、新しいslick-theme.cssを追加 <link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/> </head> <body> // 閉じるbodyタグの前、jQueryの後にslick.jsを追加(jQuery 1.7 +が必要) ~ <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script> <script type="text/javascript" src="slick/slick.min.js"></script> </body>
外部ファイルのディレクトリ指定はそれぞれ変更してください。
HTML
<div class="your-class"> <div>your content</div> <div>your content</div> <div>your content</div> </div>
「your content」の部分にそれぞれスライドの内容を入れてください。
Javascript
$(document).ready(function(){ $('.your-class').slick({ setting-name: setting-value }); });
スクリプトファイルまたはインラインスクリプトタグでスライダを初期化します。
そしてオプション設定もこちらで行います。
オプション設定
accessibility | 矢印キーのナビゲーションの有無 |
---|---|
autoplay | 自動再生の有無 |
autoplaySpeed | 自動再生のスピード |
arrows | 左右の矢印ナビゲーションの有無 |
cssEase | CSS3アニメーションの設定 |
dots | 下部のドットナビゲーションの有無 |
draggable | マウスドラッグの有無 |
fade | フェードの有無 |
easing | イージングの設定 |
infinite | 無限ループの有無 |
lazyLoad | 読み込みの設定 |
onBeforeChange | スライドする前のコールバック |
onAfterChange | スライドした後のコールバック |
pauseOnHover | 自動再生時のホバーでポーズ |
responsive | レスポンシブの設定 |
slide | スライドするエレメントの設定 |
slidesToShow | 表示するスライド数 |
slidesToScroll | スクロールするスライド数 |
speed | スライド/フェードアニメーションの速度 |
swipe | スワイプの有無 |
vertical | 縦方向へのスライド |
touchMove | タッチでスライドモーションを有効にする |
WordPressのプラグイン対応もしているようです。
Slick Slider WordPress – MaxGalleria