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

スクリーンショット 2014-08-23 8.58.25 

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サイトに対応
  • ループあり・なしを選択できる(バージョン2)
  • 1ページごとに表示アイテム個数を指定
  • シングルアイテム表示も可能
  • 動画をスライドできる(バージョン2)
  • ページ送り表示(数字表示のオプションあり)
  • 次へ・前へのオプション設定可(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>

おすすめ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です