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. countdownCube

    JavaScript

    3Dキューブのように回転するカウントダウンタイマーを実装できる「countdownCube」

    countdownCubeは3Dキューブのようにクルッと回転するカウン…

  2. JavaScript

    回転するアニメーション付きの円形ナビゲーションを実装できる「wheelnav.js」

    wheelnav.jsは回転する円形のナビゲーションを実装することがで…

  3. jQuery Magnify

    JavaScript

    シンプルで軽量なズーム機能を実装できる「jQuery Magnify」

    jQuery Magnifyはシンプルで軽量なズーム機能を実装すること…

  4. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryのeachと$.eachの簡単な使い方のメモ

    jQueryのeachと$.eachの使い方のメモです。あんまり深い知…

  5. InlineTweet.js

    JavaScript

    Webページのテキストにツイートリンクを作成できる「InlineTweet.js」

    InlineTweet.jsはWebページのテキストにツイートリンクを…

最近の記事

  1. Hermèsオレンジスポーツバンド
  2. GoPro HERO8 Black
  3. 16インチMacBook Pro

アーカイブ

PAGE TOP