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. ptrLight

    JavaScript

    モバイル用のリフレッシュインジケーターを実装できる「ptrLight」

    ptrLightはモバイル用のリフレッシュインジケーターを実装すること…

  2. characterCounter

    JavaScript

    文字数のカウントや制限ができるjQueryプラグイン「characterCounter」

    characterCounterは文字数をカウントしてくれるシンプルな…

  3. tabellajs

    JavaScript

    タッチ対応のレスポンシブなテーブルを実装できる「tabellajs」

    tabellajsはタッチに対応したレスポンシブで操作性のよいテーブル…

  4. quick-select

    JavaScript

    素早く簡単に選択できるセレクトボックス「quick-select」

    quick-selectは素早く簡単に選択可能なセレクトボックスを実装…

  5. jQuery Countdown

    JavaScript

    手軽に使えるカウントダウンタイマーを実装できる「jQuery Countdown」

    jQuery Countdownは手軽に使えるカウントダウンタイマーを…

最近の記事

  1. macOS Mojaveのダークモード
  2. Olli
  3. 単語帳メーカー(Flashcard Maker App)
  4. 1Password 7

Facebookページ

PAGE TOP