スマホサイトやレスポンシブルでも超おすすめな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>
$(document).ready(function(){

$('.owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    nav:true
});
});
</script>

You may also like...

コメントを残す

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