Categoryスライダー

レスポンシブ対応の画像スライダーを実現するjQueryプラグイン「Responsly.js」

Responsly.js

jQueryプラグインとCSS3 を利用した画像やテキスト用のレスポンシブ対応スライダーです。

このjQueryプラグインを使用すると、スマホやタブレット・デスクトップなど画面サイズの大小に関わらず、スライドショーの幅や画像の大きさを調整してくれます。また、

  • ボタンの自動表示
  • キーボードの左右キー対応
  • 自動でのスライドショー開始
などの機能があります。

まずはこちらのサンプルをご覧ください。

→ 「Responsly.js」サンプルページ


「Responsly.js」を用いたレスポンシブスライドショーの設置方法は続きをどうぞ。

→「レスポンシブ対応の画像スライダーを実現するjQueryプラグイン「Responsly.js」」の続きを読む

ページの背景に画像をフルスクリーンで表示させ、画像の切り替えも可能なjQueryプラグイン「Backstretch」

Backstretch

以前に、背景にフルスクリーン画像をスライダーで流すjQuery「maxImage Scaling Plugin」を紹介しましたが、本家のサイトの運営が再開されていないようです。

「maxImage Scaling Plugin」と同じように背景に画像をウィンドウズサイズに調節してフルスクリーン表示させることができるのが、このjQueryプラグイン「Backstretch」です。

少し、手を加えることで背景でスライドショーとして画像を流すことも出来ます。

サンプルを3パターン作ってみました。

簡単に設定できるのと、背景画像を最後に表示させることでメインのコンテンツが表示されるまで待つ必要がないのが特徴です。

設定の方法は続きをどうぞ。

→「ページの背景に画像をフルスクリーンで表示させ、画像の切り替えも可能なjQueryプラグイン「Backstretch」」の続きを読む

背景にフルスクリーン画像をスライダーで流すjQuery「maxImage Scaling Plugin」

サイトの背景で画像をフルスクリーンで表示させて、かつその画像を自動的にスライドショーとして流したいという時に使えるのがこのjQuery「jmaxImage Scaling Plugin」

jQueryを使用して、好きな画像ををサイトの背景でフルスクリーンで流すことができます。

ということで、サンプル作ってみました。こんな感じになります。

→ 「maxImage Scaling Plugin」サンプルページ


→「背景にフルスクリーン画像をスライダーで流すjQuery「maxImage Scaling Plugin」」の続きを読む

スライドするときのエフェクトがたくさんあるかっこいいjQuery画像スライダー「Nivo Slider」

「Nivo Slider」は画像をかっこよくスライドさせて見せたい方にぴったりの画像スライダーです。
16種類ものエフェクト効果があり、それらをランダムに使用することもできます。

まずはサンプルをご覧ください。

→ 「Nivo Slider」サンプルページ


「Nivo Slider」の使用方法は続きをご覧下さい。

→「スライドするときのエフェクトがたくさんあるかっこいいjQuery画像スライダー「Nivo Slider」」の続きを読む

div要素にして画像もテキストもリンクもまとめてスライドさせる「jQuery Slider2」

jQuery Slider²

「jQuery Slider2」は、簡単に画像や文字をスライドさせる軽量のJavaScriptです。

<div>~</div>で囲んだdiv要素ごとにスライドさせるという便利なスライダーです。

サンプルはこちら

→ 「jQuery Slider2」サンプルページ


「jQuery Slider2」の設置方法は続きをご覧下さい。

→「div要素にして画像もテキストもリンクもまとめてスライドさせる「jQuery Slider2」」の続きを読む

ライトボックス風な雰囲気のスライドイメージギャラリー「jQuery.popeye 2.1」

画像をクリックするとニュルッとアニメーションして画像が拡大されるLightBoxというのがありますが、その機能とイメージギャラリーを組み合わせたようなイメージギャラリーが作れるjQueryプラグインです。

サンプルをみてもらったら分かると思います。

→ サンプルページ


あまりスペースのないところにイメージギャラリーを置きたかったり、インパクトのある画像の見せ方をしたいときに使えそうです。

→「ライトボックス風な雰囲気のスライドイメージギャラリー「jQuery.popeye 2.1」」の続きを読む