gridslide.js

JavaScript

いろんな方向に画像をスライドできるjQueryイメージスライダー「gridslide.js」

gridslide.jsはいろんな方向に画像をスライドさせることができるjQueryイメージスライダーです。左右にスライドするのはもちろん、ナビゲーションスタイルによって上下や斜め方向にもスライドさせることが可能です。

gridslide.js

以下はgridslide.jsのデモページになります。

gridslide.js

デモ

ナビゲーションスタイルはGrid NavigationとClassic Navigation With Buttonsの2つがあります。

Grid Navigationはサムネイル画像がスライダー下部に並んでいて、各サムネイルをクリックするとメインの場所でスライド表示します。

現在表示されているサムネイル画像を基点に、例えば真下にあるサムネイルをクリックすると下からスライドして、右下にあるサムネイルをクリックすると右下からスライドしてきます。

各サムネイル画像が表示されている方向に合わせてスライドするのでとてもおもしろい機能ですね。

また、Classic Navigation With Buttonsは上下左右のボタンナビゲーションになっており、四方のいずれかのボタンを押すことでその方向にスライドします。

使い方もシンプルなので使いやすそうなのがいいですね。

$('.slider').gridSlide({
    menu: 'grid',
    imgGrid: true,
    title: true,
    speed: 500
});

ナビゲーションスタイルの変更はmenuというオプションから設定することができます。menuにはgridかnavが指定可能です。

gridslide.js

Uglipop.js軽量でミニマルなモーダルボックスを実装できる「Uglipop.js」前のページ

Macでデスクトップ画面を簡単に切り替える(移動)ショートカットキー次のページMacでデスクトップを切り替えるショートカットキー

関連記事

  1. Create a month picker jQuery plugin
  2. no-image

    JavaScript

    タッチ対応のドロワーコンポーネント「hy-drawer」

    hy-drawerはタッチに対応したドロワーコンポーネントです。And…

  3. jQuery.appear

    JavaScript

    ビューポート外のコンテンツ表示を防止できる「jQuery.appear」

    jQuery.appearは、元々は非表示となっているものや、ビューポ…

  4. no-image

    JavaScript

    あらかじめ設定したリストなどから複数タグを選択できる「Tokenize2」

    Tokenize2は、あらかじめ設定したリストやAjaxから複数のタグ…

  5. JavaScript

    アニメーション付きの水平・垂直プログレスメーターを実装できる「jQMeter」

    jQMeterはアニメーションが付いた水平・垂直のプログレスメーターを…

  6. JavaScript

    レスポンシブに対応して画像をポップアップ表示してくれる素敵なjQueryプラグイン「fancyBox…

    とても有名なプラグインですが、今まで使ってみたことがなかったので試して…

最近の記事

  1. パーソナルパーティション
  2. 200-DGBG020
  3. Anker PowerPort 5-in-1 37.5W Hub

アーカイブ

PAGE TOP