Webサイト上の画像スライドギャラリーを実装する際には
今ではjQueryを使うのが主流になってきていますが、
jQueryを使わずにJavascriptのみで実装する画像スライドギャラリー
「Sliderman.js」なるものがあったのでメモ書き。

Sliderman.js – Welcome – Image Slider – JavaScript Library – Created by Devtrix
DEMO:Sliderman.js – Examples

Example

画像が切り替わる際、25種類のアニメーションエフェクトがランダムで動作。
背景色や透明度、自動再生などなど、カスタマイズできるオプションも用意されています。

エフェクト動作がスムーズできれいなので
jQueryにこだわらずこれも使ってみたくなります。

  • このエントリーをはてなブックマークに追加
BlackFlag
FOLLOW

Related Posts

Comments (6)

  • akiyum | 2012.03.23 19:55

    はじめまして、京都に住む男性です。

    質問なんですが、スライドギャラリーのプラグインを探しています。
    世の中にたくさんのそういったプラグインはありますが、

    「前に戻る」、「次に戻る」が画像の両サイドにあるけど
    1枚目だけ「前に戻る」ボタンはなくて
    最後の写真には「次に戻る」ボタンがなくループされないようにしたいです。

    現状では「Nivo Slider」を使用しているのですが、代わりに上記の条件を満たすような
    プラグインはありますでしょうか?

    いきなりで申し訳ありませんが、心当たりがあるようでしたら
    ご教授よろしくお願いいたします。

  • BlackFlag | 2012.03.23 21:02

    >akiyumさん

    コメントありがとうございます。

    ご質問頂いたようなシンプルなスライダーはたくさんありますが
    自分が使った中で使いやすかったのは「Easy Slider 1.5」です。

    ・Easy Slider 1.5
    http://cssglobe.com/post/4004/easy-slider-15-the-easiest-jquery-plugin-for-sliding

    ・basic default non styled demo
    http://cssglobe.com/lab/easyslider1.5/01.html

    オプションを操作することで
    様々なパターンのスライダーにすることもでき
    シンプルで使いやすいのでぜひ試してみてください。

    よろしくお願いします。

  • maemae | 2012.05.08 12:53

    はじめまして。
    わからない点がありまして書き込みさせていただきます。

    「Easy Slider 1.5」を使い、
    5つのバナーの内3つを表示し、
    上にスライドする様に作成しています。

    例えば、1~5まで来たら「次に」のボタンを押すと、
    最初の1つ目まで戻りますが、
    5の続きで1が表示されるようにしたいのですが、
    どうしても1まで戻ってしまいます。

    修正方法を教えていただけたら嬉しいです。
    宜しくお願いします。

  • BlackFlag | 2012.05.09 0:14

    >maemaeさん

    コメントありがとうございます。

    「Easy Slider」では最終パネルから最初のパネルまで戻るには
    逆戻りでスライドする仕様になっていますね。

    最後のパネルの続きで最初のパネルを表示するには
    この「Easy Slider」プラグインを改修して使用するのではなく
    その様な仕様のプラグインを別で探した方が早いかと思っています。

    またその様なプラグインが見つかったら
    紹介してみますね。

    よろしくお願いします。

  • maemae | 2012.05.09 14:14

    ご返信ありがとうございました。
    こちらでも探してみます。

    親切にありがとうございます。

  • 複数のアニメーションエフェクトで画像をスライドさせるJavaScriptライブラリ「Sliderman.js」 | BlackFlag : ちゅどん道中記 | 2013.06.30 21:30

    [...] >>複数のアニメーションエフェクトで画像をスライドさせるJavaScriptライブラリ「Sliderman.js」 | BlackFlag Author: [...]







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

複数のアニメーションエフェクトで画像をスライドさせるJavaScriptライブラリ「Sliderman.js」

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Tweets
Book
  • jQuery Technical Note
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR