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. underline.js

    JavaScript

    遊び心あるアニメーションと美しさを追求したアンダーライン「underline.js」

    underline.jsはアニメーションが付いた美しいアンダーラインを…

  2. syncscroll

    JavaScript

    2つ以上のスクロールエリアを同時にスクロールできる「syncscroll」

    syncscrollは2つ以上のスクロールエリアを同時にスクロールでき…

  3. Alton

    JavaScript

    コンテンツごとに縦スクロールでナビゲートできるjQueryプラグイン「Alton」

    Altonはコンテンツごとに縦スクロールすることによりWebページをナ…

  4. Flex-Slider-jQuery

    JavaScript

    シングルでもマルチでもOKなフレキシブルなスライダー「Flex-Slider-jQuery」

    Flex-Slider-jQueryは、フレキシブルなスライダーを実装…

  5. Mini Previews

    JavaScript

    リンクにホバーするとプレビューが見れるjQueryプラグイン「Mini Previews」

    Mini Previewsは指定したリンクにホバーするとリンク先のプレ…

  6. Textillate.js

    JavaScript

    テキストに面白いCSS3アニメーションを加えることができるjQueryプラグイン「Textillat…

    指定したテキストに面白いCSS3アニメーションを加えることができるjQ…

最近の記事

  1. カメラマングローブ Grip Hot Shot III
  2. 包(つつむ)巾着ポーチ
  3. KMC-80BK
  4. 味噌ラーメン〜旨辛にんにく味噌〜

Instagram始めました

Facebookページ

PAGE TOP