スマホサイトやレスポンシブルでも超おすすめなjqueryスライダー「OWL Carousel 」

 

jqueryでよく使うプラグインといえば、写真をスライドさせるスライダーという種類のプラグインが思い浮かぶでしょう。

なかなかぴったりのものが見つからなくて、自作してたりもしますが、

オプションが豊富で、あらゆるサイトに適用できる「OWL Carousel 」をご紹介致します。

 

OWL Carousel の公式サイト

http://owlgraphic.com/owlcarousel/

バージョン2(現在β版)

http://www.owlcarousel.owlgraphic.com/

デモはこちら

http://www.owlcarousel.owlgraphic.com/demos/demos.html

 

OWL Carouselの機能

• レスポンシブル対応でスマホ・PCサイトに対応
• ループあり・なしを選択できる（バージョン２）
• 1ページごとに表示アイテム個数を指定
• シングルアイテム表示も可能
• 動画をスライドできる（バージョン２）
• ページ送り表示（数字表示のオプションあり）
• 次へ・前へのオプション設定可（CSSでカスタマイズ可能）
• スワイプ対応
• IE7,IE8,IE9,IE10,Firefox,Chromeといったあらゆるブラウザに対応
• 自動スライドオプションあり
• スライドスピード設定可能
• 中央揃え可能

 

私が確認した段階（2014年8月現在）では、ループ機能もありバージョン2を導入致しましたが、

β版ということもあり、IE8でエラーになってしまいましたが、中身をカスタマイズすれば対応できるレベルでした。

正式公開もすぐにでてきそうですね♪

 

使い方

jqueryと指定のjavascript・CSSを読み込み呼び出せばOK

 

            <link rel="stylesheet" href="owlcarousel/owl.carousel.min.css">
            <link rel="stylesheet" href="owlcarousel/owl.theme.default.min.css"><script src="jquery.min.js"></script>
<script src="owlcarousel/owl.carousel.min.js"></script>
<div class="owl-carousel">
<div class="item">
<h4>1</h4>
</div>
<div class="item">
<h4>2</h4>
</div>
<div class="item">
<h4>3</h4>
</div>
<div class="item">
<h4>4</h4>
</div>
<div class="item">
<h4>5</h4>
</div>
<div class="item">
<h4>6</h4>
</div>
<div class="item">
<h4>7</h4>
</div>
<div class="item">
<h4>8</h4>
</div>
<div class="item">
<h4>9</h4>
</div>
<div class="item">
<h4>10</h4>
</div>
<div class="item">
<h4>11</h4>
</div>
<div class="item">
<h4>12</h4>
</div>
</div>
<script><br />
$(document).ready(function(){</p>
<p>$('.owl-carousel').owlCarousel({<br />
    loop:true,<br />
    margin:10,<br />
    nav:true<br />
});<br />
});<br />
</script>