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

share-thisテキストを選択してシェアできるMediumライクな「share-this」前のページ

画像が細かいピースになるアニメーション実装「Animated Image Pieces」次のページAnimated Image Pieces

関連記事

  1. ARIA TOOLTIP

    JavaScript

    WAI ARIAを活用したユーザーフレンドリーなツールチップ実装「ARIA TOOLTIP」

    ARIA TOOLTIPはWAI ARIAを活用したユーザーフレンドリ…

  2. JavaScript

    フレキシブルなjQueryプラグインのアコーディオンパネル「Flexible Slide-to-to…

    いい感じのアコーディオンがあったので試してみたところ、とてもよさげだっ…

  3. Typed.js

    JavaScript

    プログラムを入力するようにタイプするエフェクトを実装できる「Typed.js」

    Typed.jsは、プログラムを入力するように文字をタイプしてくれるエ…

  4. bubbly-bg

    JavaScript

    幻想的なバブル背景アニメーションを実装できる「bubbly-bg」

    bubbly-bgは幻想的で美しいバブル(気泡)背景アニメーションを実…

  5. Panoramix Image

    JavaScript

    左右に移動できるパノラマ画像を表示させれる「Panoramix Image」

    Panoramix Imageは、左右に移動できるパノラマ画像を表示さ…

  6. JavaScript

    レスポンシブにも対応している人気のjQueryプラグインのスライダー「Nivo Slider」の使い…

    レスポンシブにも対応している人気のjQueryプラグイン「Nivo S…

最近の記事

  1. そそそ 明太クリームそうめん
  2. すしざんまい
  3. 蒼龍唐玉堂 特製牛バラ担々麺
  4. サーモンアボカドサラダラップとドリップ
  5. 猿田彦フレンチ

アーカイブ

PAGE TOP