bl6.jp

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

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