レスポンシブ対応のカルーセル「OWL Carousel」を使ってみる
2017/01/31
こんにちは、okutani(@okutani_t)です。レスポンシブ対応のカルーセル(スライドショー)の「OWL Carousel」をご紹介します。
下記の公式サイトから、実際に動作しているカルーセルを確認することができます。
LINKOwl Carousel
スマートフォンのタッチ動作に対応しており、横幅に合わせてアイテム数を可変することができる、柔軟なカルーセルです。
このOWL Carouselを使って、実際にレスポンシブなカルーセルを設置してみましょう。
スポンサーリンク
OWL Carouselの導入
TOPページの「Download for FREE」から本体をダウンロードします。
LINKOwl Carousel
解凍した中身は次のようになっています。
この中の「owl-carousel」フォルダの中身がそれぞれOWL Carousel本体です。次のファイルが該当します。
- owl.carousel.css
- owl.theme.css (OWL Carouseのレイアウトを使いたい場合に利用)
- owl.carousel.min.js (min付きは圧縮済みファイル)
- owl.transitions.css (スライドをフェードで使いたい場合に利用)
上記にプラスjQuery本体が必要です。次の例のように利用します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>OWL Carousel Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="owl.carousel.css">
<link rel="stylesheet" href="owl.theme.css">
<link rel="stylesheet" href="owl.transitions.css">
</head>
<body>
<div id="owl-example" class="owl-carousel">
<img src="img1.jpg" alt="">
<img src="img2.jpg" alt="">
<img src="img3.jpg" alt="">
<img src="img4.jpg" alt="">
<img src="img5.jpg" alt="">
<img src="img6.jpg" alt="">
</div>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="owl.carousel.min.js"></script>
<script>
$(function() {
$("#owl-example").owlCarousel();
});
</script>
</body>
</html>かんたんに解説します。
解説
カルーセルさせたい親要素に「id=”owl-example” class=”owl-carousel”」を設定します。
その中の直下にある要素がスライド対象になります。なので、子要素は次のように書くこともできます。
<div id="owl-example" class="owl-carousel">
<div>
<img src="img1.jpg" alt="" width="200">
<p>item1</p>
</div>
<div>
<img src="img2.jpg" alt="" width="200">
<p>item2</p>
</div>
<div>
<img src="img3.jpg" alt="" width="200">
<p>item3</p>
</div>
</div>使えそうな例としては、divで囲ってまとまったコンテンツをCSSで装飾して、カルーセルさせるといったものでしょうか。
1画面に表示されるスライドアイテムの数はデフォルトで5つです。後述の「items」オプションで変更できます。
jQueryコード部では、idを設置した要素に対して、OWL Carouselを適応しています。また、次のように記述することで、オプションを指定することができます。
$(function() {
$("#owl-example").owlCarousel({
// ここにオプションを設置
});
});個人的によく使いそうなオプションを記述してみました。
$(function() {
$("#owl-example").owlCarousel({
items: 4, // 1画面に表示するアイテム数
// singleItem: true, // スライドアイテムを1つだけ表示
itemsDesktop : [1199,3], //1200px以下でアイテム3つ表示
itemsTablet: [768,2], // 769px以下でアイテム2つ表示
itemsMobile : [479,1], // 480px以下でアイテム1つ表示
autoPlay: 4000, // 自動的にスライド
slideSpeed : 1000, // スライドスピード
navigation : true, // 「prev next」のナビゲーション設置
navigationText: ["戻る", "次へ"], // ナビゲーションテキストの変更
lazyLoad : true, // 画像読み込み時にローディングアイコンを表示
paginationNumbers: true, // ペジネーションを番号表示にする
stopOnHover : true, // マウスを乗せたときストップ
transitionStyle: "fade", // スライドではなくフェードで切り替える(要owl.transitions.cssかつ、1アイテム表示時)
});
});スライドのスピードやフェード切り替えなどはよく使いそうですね。
上記を設定したDEMO
その他のオプションは公式TOPページの「Customizing」で確認できます。
おまけ: 1枚画像のときのレスポンシブ対応
1枚画像をスライドさせる場合、うまくレスポンシブにならなかったので、次のようにレスポンシブ対応してみました。
HTML
<div id="owl-example" class="owl-carousel">
<img class="owl-carusel-item" src="top1.jpg" alt="">
<img class="owl-carusel-item" src="top2.jpg" alt="">
<img class="owl-carusel-item" src="top3.jpg" alt="">
<img class="owl-carusel-item" src="top4.jpg" alt="">
</div>CSS
.owl-carusel-item {
display: block;
width: 100%;
height: auto;
}上記でスマホでも見きれずに表示されるはずです。
もしかしたらオプションで対応できるかもしれませんが、見当たらなかったので実装してみました。
レスポンシブ対応のスライダーを設置する際の参考になれば幸いです。
スポンサーリンク
