OWL Carousel
「OWL Carousel」は、レスポンシブ対応の高機能カルーセルを実装できるjQueryプラグインです。マウス操作だけでなく、スマートフォンによる指での操作（フリックやスワイプ、タッチ）にも対応していて、レスポンシブWebデザインで取り入れると力を発揮しそうですね。
動作もサクサクしており、ファイルサイズも8.8KBと軽量なのも魅力です。ただし、CSS3のtranform3dを利用しているので、IE9以下では利用できません。
step1 jQueryプラグインの読み込み
jQuery本体をjQueryの公式サイトから、OWL Carouselを配布ページからダウンロードしましょう。
プラグイン配布ページの画像
一式ダウンロードされますが、必要なのは「owl-carousel」というフォルダにある「owl.carousel.min.js」と「owl.carousel.css」です。OWL Carouselが用意したスタイルを利用する場合は「owl.theme.css」も必要です。
まずはjQuery本体と「owl.carousel.min.js」を利用するWebページのbodyの閉じタグ直前で読み込み、その後にプラグインの設定を記述します。
//(中略)
<script src="jquery-1.10.2.min.js"></script>
<script src="owl.carousel.min.js"></script>
<script>
//プラグインの設定
</script>
</body>
</html>
次に、head要素の中にCSSを読み込みましょう。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Owl Carousel</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Owl Carousel Assets -->
<link href="owl-carousel/owl.carousel.css" rel="stylesheet">
</head>
//(中略)
step2 プラグインの設定
プラグインの設定を記述します。プラグインを適用したい要素を囲むセレクターに以下のように記述します。
//(中略)
<script>
$(function(){
$('.owl-carousel').owlCarousel();
});
</script>
//(中略)
このように、jQueryプラグインは、適用したい要素に、.(ドット)繋ぎでプラグイン名を書き、丸括弧"()"とセミコロン";"を書くことで実行されます。
デフォルトの機能は上記のみでも動作しますが、用意されているOWL Carouselのオプションもいくつか設定してみましょう。
<script>
$(function(){
$('.owl-carousel').owlCarousel({
slideSpeed : 200,
// スライドのスピードを設定します。ミリ秒で指定します。
responsive: true,
// レスポンシブであるかをtrue,falseで指定します。デフォルトはfalse(レスポンシブにしない)です。
items : 3,
// 表示させる要素の数を指定します。3と指定すれば、3つ表示された状態になります。
});
});
</script>
- slideSpeed：スライドのスピードを設定します。ミリ秒で指定します
- responsive：レスポンシブであるかをtrue,falseで指定します。デフォルトはfalse(レスポンシブにしない)です
- items：表示させる要素の数を指定します。3と指定すれば、3つ表示された状態になります
ほかにも以下のようなオプションが用意されています。
<script>
$('#content').infinitescroll({
paginationSpeed: false,
// カルーセルのインジケーター(丸いぽっち)を押した時に何秒かけてスライドさせるかを指定します。
// 指定はミリ秒で行います。
autoPlay : false,
// ローディング時のローディング画像のパスの指定
// デフォルトのパスは: "http://www.infinite-scroll.com/loading.gif"
goToFirst : true,
// ローディング画像に添えるテキストの指定
// デフォルトのテキストは: "<em>Loading the next set of posts...</em>"
goToFirstSpeed : 1000,
// コンテンツのロード時にアニメーションさせるかの指定
// デフォルトは: false
stopOnHover: false,
// 次のコンテンツを読み込むまでのスクロール量のピクセルを指定
// animateを有効にさせるにはこの値を必ず指定しましょう。
// デフォルトの値は: 150
navigation : false,
// すべてのコンテンツを表示し終わったら表示させるテキスト
// デフォルトのテキストは: "<em>Congratulations, you've reached the end of the internet.</em>"
navigationText : ["prev","next"],
// 読み込むデータの形式を指定します。
pagination : true,
// 読み込むデータの形式を指定します。
paginationNumbers : false,
// 読み込むデータの形式を指定します。
itemsDesktop : [1199,4],
// responsiveをtrueにしている場合のアイテム数を指定できます。
// 左にブレイクポイント(何px以下の場合)の数値、カンマ区切りで右に表示させる要素数を指定できます。
// 上記の例では、1199px以下で、要素を4つにします。
itemsDesktopSmall : [979,3],
// responsiveをtrueにしている場合のアイテム数を指定できます。
// 左にブレイクポイント(何px以下の場合)の数値、カンマ区切りで右に表示させる要素数を指定できます。
// 上記の例では、979px以下で、要素を3つにします。
itemsTablet : [768,2],
// responsiveをtrueにしている場合のアイテム数を指定できます。
// 左にブレイクポイント(何px以下の場合)の数値、カンマ区切りで右に表示させる要素数を指定できます。
// 上記の例では、768px以下で、要素を2つにします。
itemsMobile : [479,1],
// responsiveをtrueにしている場合のアイテム数を指定できます。
// 左にブレイクポイント(何px以下の場合)の数値、カンマ区切りで右に表示させる要素数を指定できます。
// 上記の例では、479px以下で、要素を1つにします。
baseClass : "owl-carousel",
// スライド要素のスタイルをデフォルトから変更する場合にこのベースクラスを
// [owl-carousel]以外の自分で用意したクラスにしましょう。
theme : "owl-theme",
// ボタンやナビゲーションのスタイルをデフォルトから変更する場合にはこのthemeを
// [owl-theme]以外の自分で用意したCSSファイル名にしましょう。
});
</script>
- paginationSpeed：カルーセルのインジケーター(丸いぽっち)を押した時に何秒かけてスライドさせるかを指定
- autoPlay：ローディング時のローディング画像のパスの指定
- goToFirst：ローディング画像に添えるテキストの指定
- goToFirstSpeed：コンテンツのロード時にアニメーションさせるかの指定
- stopOnHover：次のコンテンツを読み込むまでのスクロール量のピクセルを指定
- navigation：すべてのコンテンツを表示し終わったら表示させるテキスト
- navigationText：読み込むデータの形式を指定
- pagination：読み込むデータの形式を指定
- paginationNumbers：読み込むデータの形式を指定
- itemsDesktop：responsiveをtrueにしている場合のアイテム数を指定
- itemsDesktopSmall：responsiveをtrueにしている場合のアイテム数を指定
- itemsTablet：responsiveをtrueにしている場合のアイテム数を指定
- itemsMobile：responsiveをtrueにしている場合のアイテム数を指定
- baseClass：スライド要素のスタイルをデフォルトから変更する場合にはこのベースクラスを指定
- theme：ボタンやナビゲーションのスタイルをデフォルトから変更する場合に指定
上記のようなさまざまなオプションがあります。基本的には何も指定しなくても十分動いてくれますし、baseClassやthemeを変更することでカスタマイズもできます。
また、APIも提供されていて、配布のページのドキュメントで確認できます。
■Owl Carousel（Customizing）
http://owlgraphic.com/owlcarousel/#customizing
たくさんの機能が用意されていますね。
jQueryプラグインではこのように多くのオプションが用意されています。使用する前にそのプラグインがどのようなオプションを持っているか知っておけば、プラグインの選定にも役立ちます。
step3 HTMLへの組み込み
カルーセルを表示させたいHTMLを以下のように記述します。
ファイル名（例）：owlcarouseltest.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>OWL Carouselのテスト</title>
// OWL Carouselが用意したスタイルを利用
<link rel="stylesheet" href="css/owl.carousel.css">
<link rel="stylesheet" href="css/owl.theme.css">
<link rel="stylesheet" href="css/custom.css">
</head>
<body>
<section class="demo-area">
<h3>DEMO</h3>
<div class="demo-content">
<div class="item darkCyan">
<img src="img/touch.png" alt="Touch">
<h3>Touch</h3>
<h4>Can touch this</h4>
</div>
<div class="item forestGreen">
<img src="img/grab.png" alt="Grab">
<h3>Grab</h3>
<h4>Can grab this</h4>
</div>
<div class="item orange">
<img src="img/responsive.png" alt="Responsive">
<h3>Responsive</h3>
<h4>Fully responsive!</h4>
</div>
<div class="item yellow">
<img src="img/css3.png" alt="CSS3">
<h3>CSS3</h3>
<h4>3D Acceleration.</h4>
</div>
<div class="item dodgerBlue">
<img src="img/multi.png" alt="Multi">
<h3>Multiply</h3>
<h4>Owls on page.</h4>
</div>
<div class="item skyBlue">
<img src="img/modern.png" alt="Modern Browsers">
<h3>Modern</h3>
<h4>Browsers</h4>
</div>
<div class="item zombieGreen">
<img src="img/zombie.png" alt="Zombie Browsers - old ones">
<h3>Zombie</h3>
<h4>Browsers</h4>
</div>
<div class="item violet">
<img src="img/controls.png" alt="Take Control">
<h3>Take Control</h3>
<h4>The way you you like</h4>
</div>
<div class="item yellowLight">
<img src="img/feather.png" alt="Light">
<h3>Light</h3>
<h4>As a feather</h4>
</div>
<div class="item steelGray">
<img src="img/tons.png" alt="Tons of Opotions">
<h3>Tons</h3>
<h4>of options</h4>
</div>
</div>
<!-- /.demo-area --></section>
</section>
<!-- /.demo-content --></div>
<footer>
<p><small>© Komei Otake.</small></p>
</footer>
<!-- /#wrapper --></div>
// jQuery本体の読み込み
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js"></script>
<script>window.jQuery || document.write("<script src='js/vendor/jquery.js'>\x3C/script>")</script>
// OWL Carouselの読み込み
<script src="js/demo/002/owl.carousel.min.js"></script>
// OWL Carouselの設定
<script>
$('.demo-content').owlCarousel({
slideSpeed : 500,
// スライドスピードを500ミリ秒に指定
items : 3,
// 要素の表示数を3つに指定
navigation : true
// ナビゲーションを表示
});
</script>
</body>
</html>
このプラグインでは、スライドさせたい要素をクラスなどで1つずつ指定するのではなく、プラグインの設定で指定したセレクターの中に、並列で並んでいる子要素をスライドアイテムとみなします。サンプルでは、「div .demo-content」の子要素である「div .item ○○○」がスライドする要素にです。
<div class="demo-content">
<div class="item darkCyan"> <!-- スライド1 -->
//（中略）
</div>
<div class="item forestGreen"> <!-- スライド2 -->
//（中略）
</div>
<div class="item orange"> <!-- スライド3 -->
//（中略）
</div>
・
・
・
</div>
スライドする子要素は、spanのようなインライン要素であっても、h1のようなブロック要素であっても構いません。
実装が非常に簡単な上に、高機能ですので、スマートフォンサイトや、IE10以降を対象としたレスポンシブWebデザインの案件では大いに役立ってくれそうですね！
