レスポンシブ対応のカルーセル「OWL Carousel」を使ってみる

2015/12/24 2017/01/31

Pocket

こんにちは、okutani(@okutani_t)です。レスポンシブ対応のカルーセル(スライドショー)の「OWL Carousel」をご紹介します。

下記の公式サイトから、実際に動作しているカルーセルを確認することができます。

LINKOwl Carousel

スマートフォンのタッチ動作に対応しており、横幅に合わせてアイテム数を可変することができる、柔軟なカルーセルです。

このOWL Carouselを使って、実際にレスポンシブなカルーセルを設置してみましょう。

1 OWL Carouselの導入
- 1.1 解説
- 1.2 おまけ: 1枚画像のときのレスポンシブ対応

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」で確認できます。

参考Owl Carousel #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;
}

上記でスマホでも見きれずに表示されるはずです。

もしかしたらオプションで対応できるかもしれませんが、見当たらなかったので実装してみました。

レスポンシブ対応のスライダーを設置する際の参考になれば幸いです。

Pocket

okutani (@okutani_t) のヒトコト

レスポンシブなスライダーはひとつ使えるようになっておくと良いですね。これでトップページがオシャレになること間違いなし( ^ω^)

- jQuery

こちらの関連記事もどうぞ

: 「fakeLoader.js」でローディング画面を実装してみよう！

こんにちは、okutani(@okutani_t)です。コンテンツの読み込みが多 …

: jQueryとjQuery UIをCDNでサイトに導入する手順

こんにちは、okutani(@okutani_t)です。JavaScriptを使 …

: Lazy Line PainterでSVGアニメーションを実装してみよう

こんにちは、okutani(@okutani_t)です。「Lazy Line P …

PREV: Wordpress全バックアップを「BackWPup+Dropbox」で行う
NEXT: 僕の女性遍歴と音楽についての記録的ななにか

レスポンシブ対応のカルーセル「OWL Carousel」を使ってみる

OWL Carouselの導入

解説

おまけ: 1枚画像のときのレスポンシブ対応

PC用AdSense

PC用AdSense

こちらの関連記事もどうぞ

「fakeLoader.js」でローディング画面を実装してみよう！

jQueryとjQuery UIをCDNでサイトに導入する手順

Lazy Line PainterでSVGアニメーションを実装してみよう