
レスポンシブ対応はもちろんのこと、マウスホイールやタッチにも対応したカルーセルスライダーを実装できる「OwlCarousel2」。設置方法とオプションの設定方法をまとめました。
レスポンシブ対応はもちろんのこと、マウスホイールやタッチにも対応したカルーセルを実装できるプラグイン「OwlCarousel2」。
60以上のオプション設定も可能で、カスタマイズもかなり効くため重宝しています。
実装は簡単なのですが、実はこのOwlCarousel、以前のバージョンとオプションの記述が変更されている点が多々あり、日本語の解説記事が古いバージョンのものばかりで「なんだ動かねーじゃねーのこんにゃろう」ってなることが多いのです。
今回は「OwlCarousel2 2.0.0-beta.2.4」を用いていますので、過去のバージョンやOwlCarousel無印をご利用の際はご注意ください。
OwlCarousel2設置手順
OwlCarousel2は、タッチ・ドラッグ対応のカルーセルを実装できるjQueryプラグインです。
使用するためにはjQueryを読み込む必要があります。
01.OwlCarousel2とjQueryを用意する
以下のリンクから配布ページにアクセスできます。
動作に必要なものは「owl.carousel.js」「owl.carousel.css」、jQueryの三つです。
<link rel="stylesheet" href="owl.carousel.css"> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <script src="owl.carousel.js"></script>
02.カルーセルにする部分を記述する
カルーセルの中身にあたる部分のHTMLを記述します。
「外枠」と「中身」にあたる部分を準備します。リストでもDivでも構いません。
「外枠」にあたる部分には「owl-carousel」というクラスを、
「中身」にあたる部分には「item」というクラスを付与します。
下記例ではリストにしていますが、クラス名さえ合っていればdivでもなんでも問題ないです。
<ul class="owl-carousel"> <li class="item"></li> <li class="item"></li> <li class="item"></li> </ul>
03.条件を設定する
動作に必要な設定を行います。
最低限必要なのは「items」の項目です。
$(function(){ $('.owl-carousel').owlCarousel({ loop:true, //項目をループさせる margin:10, //itemの間隔 items: 4, //表示する項目数 }) });
上のDEMOからデモをご覧になれます。
細かいオプションに関してはまた次回詳しく記述いたします!
また、公式ページのDemosに様々なサンプルが掲載されていますので、そちらもご覧ください。