Owl Carousel2の導入方法と使い方をサンプルコード付き解説!
導入するだけで簡単にカルーセルを実装することが出来るようになるjQueryプラグインのOwl Carousel2があります。簡単に実装できるだけでなく、Owl Carousel2では様々なオプションが用意されておりカスタマイズも簡単にできます。
Owl Carouselとは?
Owl Carouselとはカルーセルを実装することができるjQueryのプラグインです。
カルーセルを1から実装するとなると少々大変ですが、導入するだけで簡単に実装することが出来ます。
導入するのも簡単にできて、オプションが豊富でカスタマイズも容易にできます。
この記事ではOwl Carousel 2の導入の仕方から簡単な使い方を紹介していきます。
Owl Carouselの導入方法
導入するのに必要なファイル一式は、下記のOwl Carousel 2のサイトからzipファイルをダウンロードするかGithubからダウンロードすることができます。
ダウンロードしてきたフォルダの中から下記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にはまだまだオプションが用意されていて、それらを用いることで様々なカルーセルを表現することが出来ます。下記の記事でオプションについて紹介しているので、ぜひ参考にしてみてください。
