カルーセルの決定版!スマホにも対応した「OWL Carousel」

「OWL Carousel」はスマホからのタッチ操作や、レスポンシブデザイン、クロスブラウザ対応がされたカルーセルスライダーを実装するjQueryプラグインです。

OWL Carousel

Owl-Carousel

最近は多くのプラグインがスマホからのタッチ操作に対応しつつあります。時代の流れですね。このプラグインにおいても例外ではなく、しっかりタッチ操作に対応しております。PCではドラッグが相当します。

 

レスポンシブデザインが取り込まれており、画面幅をかえるとページネーションも作り替えられます。例えばこの状態から画面幅を狭めると。

Owl-Carousel-demo-1

 

この通り、ページネーションの個数が2個から4個に変わっています。

Owl-Carousel-demo-2

 

そしてクロスブラウザ対応により「IE7, IE8, IE9, IE10, Chrome, Safari, Firefox, Opera, Dolphin, iPhone, iPad, Google Nexus」に対応しているとのこと。すごいですね。

 

それでは「OWL Carousel」の実装方法をご紹介します。まずはjQuery含む外部ファイルを読み込みます。

<link href="owl-carousel/owl.carousel.css" rel="stylesheet">
<link href="owl-carousel/owl.theme.css" rel="stylesheet">
<script src="assets/js/jquery-1.9.1.min.js"></script> 
<script src="owl-carousel/owl.carousel.js"></script>

 

HTMLはこのようにマークアップします。

<div id="container">
  <div class="owl-carousel owl-theme">
    <div>Content 1</div>
    <div>Content 2</div>
    <div>Content 3</div>
    <div>Content 4</div>
    <div>Content 5</div>
    <div>Content 6</div>
    <div>Content 7</div>
  </div>
</div>

 

CSSはDemo用にこのように指定しました。

#container {
  width: 640px;
}

 

JavaScriptはこのように実装します。

$(document).ready(function($) {
  $(".owl-carousel").owlCarousel();
});

 

するとこのように作ることが出来ました。

Owl-Carousel-sample-1

とても簡単。オプションや、APIも豊富で言うことなし!現時点でカルーセルの決定版だと思っています。参考にどうぞ。

 

Home > JavaScript > カルーセルの決定版!スマホにも対応した「OWL Carousel」

Return to page top