Vimeo Carousel Gallery

JavaScript

Vimeoのカルーセルを実装できるjQueryプラグイン「Vimeo Carousel Gallery」

Vimeo Carousel GalleryというjQueryプラグインを使えば、Vimeoのカルーセルを実装することができます。オススメVimeo集の紹介やVimeoのギャラリーを作りたい時なんかに使えそうですね。以下は使い方です。

[ads_center]

Vimeo Carousel Galleryの使い方

以下から実際のデモを確認することができます。

Vimeo Carousel Gallery

デモ

デモでは下部のサムネイルが並んでいる両端に左右の矢印ナビゲーションがついています。シンプルでとても使いやすくていいですね。

使い方は、まずjQuery本体とプラグインを読み込みます。

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" src="lib.js"></script>

そして以下のようにVimeoのリストなどを設定していけばOKです。

var data = {
    "main" : "VimeoのURL",
    "videos" : [
        { "url" : "VimeoのURL" },
        { "url" : "VimeoのURL" },
        <!-- 中略 -->
        { "url" : "VimeoのURL" }
    ]
}

Vimeo.init({
    container: $('.gallery')
});

Vimeo Carousel Gallery

関連記事

  1. no-image
  2. normalmap.js

    JavaScript

    インタラクティブなライティングエフェクトを実装できる「normalmap.js」

    normalmap.jsはシンプルでインタラクティブなライティングエフ…

  3. Dropit

    JavaScript

    シンプルでフレキシブルなドロップダウンメニュー「Dropit」

    Dropitはシンプルでフレキシブルなドロップダウンメニューを実装でき…

  4. Vague.js

    JavaScript

    要素をぼかすことができるjQueryプラグイン「Vague.js」

    要素をぼかすことができるjQueryプラグイン「Vague.js」が面…

  5. SPOILER ALERT!

    JavaScript

    画像やテキストにボカシを入れることができるjQueryプラグイン「SPOILER ALERT!」

    画像やテキストといった部分にボカシを入れることができるjQueryプラ…

最近の記事

  1. cheero USB-C PD Charger 60W
  2. DY-S01
  3. OWL-QI10W04
  4. BQ-CC87L

アーカイブ

PAGE TOP