Owl Carousel 2

JavaScript

美しいレスポンシブなカルーセルスライダーを実装できる「Owl Carousel 2」

Owl Carousel 2は、美しいレスポンシブなカルーセルスライダーを実装することができるjQueryプラグインです。タッチ対応でスマホやタブレットなど、モバイルには最適なカルーセルを表示させることが可能です。以前Owl Carouselを紹介しましたが、今はOwl Carousel 2となり、より新しくバージョンアップされたみたいですね。

Owl Carousel 2

デモ

パソコンから操作する場合は、アイテムを横にドラッグすることでスライド移動させることができます。一方、スマホでの操作の場合は、スワイプをすることでアイテムをスライド移動できます。動作がとても滑らかで操作性もよく、快適にカルーセルスライダーを楽しめそうですね。

ちなみに、デモのカルーセルスライダーは無限ループになっています。レスポンシブにも対応しているので、パソコンからスマホまで幅広いシーンで活躍してくれるはず。

マークアップもかなりシンプルで、スライダー内のアイテムをdiv、a、img、span、liなどで並べ、owl-carouselというクラス名を付与したdivで括ればOKです。

また、オプションもかなり豊富に用意されているので、カスタマイズ性も抜群です。items、margin、loop、center、mouseDrag、touchDrag、pullDrag、freeDrag、stagePadding、merge、mergeFit、autoWidth、startPosition、URLhashListener、nav、rewind、navTex、navElement……など、まだまだたくさんのオプション項目があります。

多彩なオプションを使用して、自サイトに合わせたカスタマイズをしたい人にはピッタリですね。

テスト済みのブラウザは、Chrome、Firefox、Opera、IE7/8/10/11、iPad Safari、iPod4 Safari、Nexus 7 Chrome、Galaxy S4、Nokia 8s Windows8とのこと。ライセンスはMITになります。

Owl Carousel 2

関連記事

  1. Zoom Slider

    JavaScript

    ズーム機能を備えたシンプルなコンテンツスライダー「Zoom Slider」

    Zoom Sliderは奥行き感を演出したズーム機能を備えたシンプルな…

  2. Canvi

    JavaScript

    左右からスライド表示するシンプルなナビゲーションメニュー「Canvi」

    CanviはVanilla JSによるシンプルなナビゲーションメニュー…

  3. Stripe.Com Navigation

    JavaScript

    コンテナがアニメーションで可変するナビゲーション「Stripe.Com Navigation」

    ナビゲーションメニューのコンテナがアニメーションで可変するドロップダウ…

  4. JavaScript

    blur効果で要素を簡単にぼかしてくれるjQueryプラグイン「Foggy」

    FoggyというjQueryプラグインを使ってみました。これを使えば指…

  5. Switchery

    JavaScript

    チェックボックスをiOS7のようなスタイルにしてくれるjQueryプラグイン「Switchery」

    SwitcheryというjQueryプラグインを使えば、チェックボック…

  6. no-image

    JavaScript

    超シンプルでオプションもわかりやすいjQueryスライダー「Free Simple Slider」

    Free Simple Sliderは、超シンプルで使い方も簡単なスラ…

最近の記事

  1. フェルメール展
  2. 上島珈琲店 No.11
  3. 銀座トリコロール

アーカイブ

PAGE TOP