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

関連記事

  1. jQuery touchSwipe Carousel
  2. Animated Page Transition
  3. Tipso

    JavaScript

    レスポンシブでアニメーションもいい感じのツールチップのjQueryプラグイン「Tipso」

    Tipsoはレスポンシブに対応した軽量でアニメーションもいい感じのツー…

  4. JavaScript

    縦スクロールすると横スクロール(水平移動)していくjQueryプラグイン「jInvertScroll…

    これおもしろいですね。縦スクロールすると垂直に移動していくのではなくて…

  5. Chocolat

    JavaScript

    レスポンシブ対応のシンプルなLightbox風のjQueryプラグイン「Chocolat」

    Chocolatはレスポンシブに対応したシンプルでスタイリッシュなLi…

最近の記事

  1. CHA-SAJI
  2. SLE-19P
  3. Soundcore Ace A0
  4. Fire 7 タブレット

アーカイブ

PAGE TOP