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

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

コンテンツ [表示]

  1. 1Owl Carouselとは?
  2. 2Owl Carouselの導入方法
  3. 3Owl Carouselの使い方
  4. 3.1HTML
  5. 3.2CSS
  6. 3.3jQuery
  7. 4Owl Carouselのオプション
  8. 4.1シンプルなカルーセル
  9. 4.2自動再生カルーセル
  10. 5まとめ

Owl Carouselとは?

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

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

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

この記事では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.

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

  • 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となっているので、指定しなければ3つの要素が表示されています。

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

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

 

自動再生カルーセル

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

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

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

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

まとめ

Owl Carousel2の導入方法と使い方を紹介してきました。Owl Carousel2にはまだまだオプションが用意されていて、それらを用いることで様々なカルーセルを表現することが出来ます。下記の記事でオプションについて紹介しているので、ぜひ参考にしてみてください。

あわせて読みたい
Owl Carousel2のオプション一覧と使い方を紹介!のイメージ
Owl Carousel2のオプション一覧と使い方を紹介!
Owl Carousel2というプラグインを導入することで簡単にカルーセルを実装することが出来ます。Owl Carousel2ではオプションが多く用意されています。この記事ではOwl Carousel2のオプションの使い方をサンプルコード付きで解説しています。

【期間限定】全カリキュラム無料で提供中!

Qumeru

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事