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. jQuery Reel Plugin

    JavaScript

    上下左右の色んな角度から画像を回転させて見せることができる「jQuery Reel Plugin」

    これは面白いですね。画像を上下左右と色んな角度から回転させながら見るこ…

  2. sidebar-nav

    JavaScript

    ツリー型のサイドナビゲーションを実装できる「sidebar-nav」

    sidebar-navはツリー型でレスポンシブに対応したサイドナビゲー…

  3. dndod

    JavaScript

    依存性のないシンプルで簡単なモーダルライブラリ「dndod」

    dndodはjQueryなどへの依存性のないシンプルで簡単なJavaS…

  4. NO IMAGE

    JavaScript

    テキストコンテンツをページ分割(ページネーション)できる「jPaginate」

    jPaginateはWebページ内のテキストコンテンツをページ分割(ペ…

  5. JavaScript

    スクロールしても固定表示されてついてくるjQueryプラグイン「Sticky」

    StickyというjQueryプラグインを使えば、スクロールしても固定…

  6. intence

    JavaScript

    インタラクティブなナビゲーションスクロールバーのJSライブラリ「intence」

    intenceはスクロール中のエリアが分かるインタラクティブなナビゲー…

最近の記事

  1. ルック セレクション
  2. シルキーウインドモバイル
  3. アリエール パワージェルボール3D
  4. NuAns × Shibaful TAGPLATE

アーカイブ

PAGE TOP