最終更新日: 2021年2月18日

Owl Carousel2の導入方法と使い方をサンプルコード付き解説！

導入するだけで簡単にカルーセルを実装することが出来るようになるjQueryプラグインのOwl Carousel2があります。簡単に実装できるだけでなく、Owl Carousel2では様々なオプションが用意されておりカスタマイズも簡単にできます。

コンテンツ [表示]

Owl Carouselとは？

Owl Carouselとはカルーセルを実装することができるjQueryのプラグインです。

カルーセルを１から実装するとなると少々大変ですが、導入するだけで簡単に実装することが出来ます。

導入するのも簡単にできて、オプションが豊富でカスタマイズも容易にできます。

この記事ではOwl Carousel 2の導入の仕方から簡単な使い方を紹介していきます。

Photo byPexels

Owl Carouselの導入方法

導入するのに必要なファイル一式は、下記のOwl Carousel 2のサイトからzipファイルをダウンロードするかGithubからダウンロードすることができます。

Home | Owl Carousel | 2.3.4

Touch enabled jQuery plugin that lets you create beautiful responsive carousel slider.

ダウンロードしてきたフォルダの中から下記３つのファイルをプロジェクトフォルダの任意の場所に配置します。

owl.carousel.css
owl.theme.default.css
owl.carousel.js

これらのファイルを読み込んでいきます。

cssファイルはheadタグ内で読み込みます。

CSS読み込み

<haed>
  <link rel="stylesheet" href="owl.theme.default.css">
  <link rel="stylesheet" href="owl.carousel.css">
</head>

jsファイルはheadタグ内でも良いですが、bodyタグの閉じタグ直前で読み込みます。

Owl CarouselはjQueryプラグインなので、Owl Carouselのjsファイルを読み込む前にjQueryを読み込む必要があるので忘れず読み込みましょう。

<body>
  .....
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
  <script src="owl.carousel.js"></script>
</body>

Owl Carouselの使い方

HTML

index.html

<div class="owl-carousel owl-theme">
  <div class="item">1</div><!-- .item -->
  <div class="item">2</div><!-- .item -->
  <div class="item">3</div><!-- .item -->
  <div class="item">4</div><!-- .item -->
  <div class="item">5</div><!-- .item -->
  <div class="item">6</div><!-- .item -->
  <div class="item">7</div><!-- .item -->
  <div class="item">8</div><!-- .item -->
  <div class="item">9</div><!-- .item -->
  <div class="item">10</div><!-- .item -->
  <div class="item">11</div><!-- .item -->
  <div class="item">12</div><!-- .item -->
  <div class="item">13</div><!-- .item -->
  <div class="item">14</div><!-- .item -->
  <div class="item">15</div><!-- .item -->
  <div class="item">16</div><!-- .item -->
</div><!-- .owl-carousel -->

カルーセルを表示させる外枠の要素にowl-carouselクラスを付けます。カルーセルを実装するだけならowl-carouselクラスのみで十分ですが、ナビゲーションのドットを実装するためにもowl-themeクラスも同じ要素に付けます。

カルーセルの中身になる要素に対してはitemクラスを付けておきます。itemクラスはCSSでデザインをカスタマイズしやすいように付けていますので、クラス名を付けなくてもカルーセルとしては機能します。

CSS

index.css

.item{
  height: 200px;
  padding: 20px;
  background-color: green;
  color: white;
  font-size: 2rem;
  font-weight: bold;
}

カルーセルの中身の要素をデザインします。

jQuery

index.js

$(function(){
  $('.owl-carousel').owlCarousel();
});

最後にカルーセルの機能を実装していきます。

とは言ってもOwl Carousel 2を用いているので簡単です。

owl-carouselクラスの要素に対してowlCarouselメソッドを使用するだけでカルーセルが実装できます。

Owl Carouselのオプション

owlCarouselメソッドの引数にオブジェクトでオプションを指定することで、様々なカルーセルを実装することが出来ます。

index.js

$(function(){
  $('.owl-carousel').owlCarousel({
    option1: value,
    option2: value
  });
});

ここではサンプルコードを使って実装しながら、オプションの一部を紹介していきます。

シンプルなカルーセル

まずはシンプルなカルーセルを実装するためのオプションをいくつか紹介します。

itemsはカルーセルで表示する要素の数を指定することができます。デフォルトでは値が3となっているので、指定しなければ３つの要素が表示されています。

marginを指定することで、指定した数値のpx分だけ要素間に隙間ができます。

loop: trueを指定することで一番最初の要素の左から一番最後の要素が現れるようになり、要素をループさせることができます。

自動再生カルーセル

次に自動的に再生されるカルーセルを実装していきます。こちらもオプションを指定するだけで簡単に実装することが出来てしまうので、非常に便利ですね。

autoplay: trueを指定することで自動再生することができます。自動再生することで右から左に要素が１つずつ勝手に移動してくれます。

autoplayTimeoutは自動再生の時間間隔を指定することができます。今回、1000と指定しているので1秒経つごとに要素が１つずつ移動します。

autoplayHoverPause: trueを指定すると要素の上にマウスが乗ると自動再生が一時的に停止します。