Categoryスライダー

左右の画像をみせるイメージスライダーを作れる「Slider Pro」jQueryプラグイン

Slider Pro

「Slider Pro」は多機能のスライダーを作ることができるjQueryプラグインです。このjQueryプラグインを使って、左右の画像をみせることができるカルーセル型のスライダーを作ってみます。

このような感じになります。

2016-09-29_1740

サンプルはこちらをごらんください。

「Slider Pro」サンプル

設置方法は続きをご覧ください。

→「左右の画像をみせるイメージスライダーを作れる「Slider Pro」jQueryプラグイン」の続きを読む

タッチデバイス対応のスライダーjQueryプラグイン「Glide.js」

jQueryプラグイン「Glide.js」を利用すれば、スマホ・タブレット・デスクトップに対応したスライドショーを簡単に設置することができます。

特徴は、スマホなどの画面からスライダーを指でスワイプすることで画像などのコンテンツを切り替えれることです。また4.5kbと超軽量なのでサクサク動きます。

画面の大きさによって自動的にサイズが切り替わるレスポンシブになっています。

タッチデバイスと相性が良いスライダーでは、今のところこのjQueryプラグイン「Glide.js」が一番かもしれません。

サンプルを作ってみました。

タッチデバイス対応のスライダーjQueryプラグイン「Glide.js」サンプル

オールドブラウザでも動くように配慮してあるとのこと。スワイプだけでなくキーボードの矢印キーやスライダー上のメニューからも切り替えることができます。

→「タッチデバイス対応のスライダーjQueryプラグイン「Glide.js」」の続きを読む

ul要素を簡単にカルーセルに変換してくれるjQueryプラグイン『dbpasCarousel』

dbpas / dbpasCarousel

カルーセルとは、画像やテキストなどのコンテンツを横にスライドさせながら表示させるWebデザインです。Amazonや楽天などのECサイトでもよく見られますね。

カルーセルを実装するjQueryプラグインやJavascriptはいろいろなサイトで多数紹介されていますが、ここではおなじみの<ul>要素を自動的にカルーセルに変換して表示してくれるjQueryプラグイン『dbpasCarousel』を紹介します。

サンプルをご覧下さい。

「ul要素を簡単にカルーセルに変換してくれるjQueryプラグイン『dbpasCarousel』サンプル」

設定もいたって簡単。jQueryを読みこませて、<ul>タグと<li>タグを利用してリスト表示で記述するだけです。

では使用方法をみてみましょう。

→「ul要素を簡単にカルーセルに変換してくれるjQueryプラグイン『dbpasCarousel』」の続きを読む

シンプルなサムネイル画像つきスライダーjQueryプラグイン「AD Gallery」

AD Gallery

今まで、サムネイル付きスライダーを紹介したことなかったので、今回はサムネイル画像を表示させた画像スライダーをご紹介します。

最近、動きが凝ったjQueryのスライダー用のjQueryプラグインもいろいろ登場していますが、シンプルなサムネイル付きスライダー用のjQueryプラグインが必要なこともあるかと思います。

設置も難しくないですので、トップ画像に利用したり、ギャラリーにしたりと用途は広いです。

サンプルを作ってみました。

シンプルなサムネイル画像つきスライダーjQueryプラグイン「AD Gallery」サンプル

各ブラウザにも対応しています。軽くて設置もしやすいので、おすすめのスライダーです。

Firefox 3.5以降 , IE6以降, Chrome2以降 , Safari4以降, Opera9以降に対応しています。

→「シンプルなサムネイル画像つきスライダーjQueryプラグイン「AD Gallery」」の続きを読む

jQueryスライドショー「Camera slideshow」をフルスクリーンで背景にする方法

高機能過ぎるjQueryスライドショー「Camera slideshow」という記事でご紹介したスライドショー「Camera slideshow」をフルスクリーンで背景にする方法をご紹介します。

サンプルを作ってみました。ご覧下さい。

「Camera slideshow」をフルスクリーンで背景にするサンプル

フルスクリーン用のスタイルを追加してあげる必要がありますが、比較的簡単に導入できると思います。良い感じのフルスクリーンスライドショーになります。どうぞお試し下さい。

→「jQueryスライドショー「Camera slideshow」をフルスクリーンで背景にする方法」の続きを読む

めんこのように丸い画像がクルクル回るイメージスライドショー『Flipping Circle Slideshow』

今回は、丸いめんこのようなイメージ画像をひっくり返しながらクルクル切り替えるスライドショーを紹介します。(めんこといっても若い人にはわからないかもしれませんが、他に良い例えが浮かばなかったので。)

では、サンプルを作ってみましたのでご覧下さい。

『Flipping Circle Slideshow』サンプル

最近はこのようなサークルのカタチが流行っているようですね。設置も簡単ですので、活用してみて下さい。

→「めんこのように丸い画像がクルクル回るイメージスライドショー『Flipping Circle Slideshow』」の続きを読む

高機能過ぎるjQueryスライドショー「Camera slideshow」

Camera slideshow

「Camera slideshow」は細かいところまであらゆる設定ができる高機能のjQueryスライドショーです。

デフォルトの状態でも十分に機能しますが、スキンやエフェクト、メーターの種類やナビゲーション、画像別に見せる時間を変えるなど様々な設定が可能です。

また、レスポンシブ対応しています。設定によってはフルスクリーンでのスライドショーを背景に設定することもできます。動画を組み込むことも可能です。

サンプルを作ってみました。

「高機能過ぎるjQueryスライドショー『Camera slideshow』サンプル」

(追加記事:jQueryスライドショー「Camera slideshow」をフルスクリーンで背景にする方法

軽くて使いやすいですので、どの画像ギャラリースライダーを使おうか迷った時の選択肢のひとつに良いと思います。

→「高機能過ぎるjQueryスライドショー「Camera slideshow」」の続きを読む

ネットショップに最適。目を引くクールな商品スライダー「Simple Multi-Item Slider 」

ネットショップでアイテム紹介に使える商品スライダーのソースを紹介します。CSSとjQueryを使用してあります。

シンプルかつ、モダンなインパクトのあるアイテムスライダーです。

カテゴリーごとにアイテムが横に飛び去っていくような効果があり、スピード感があります。
Apple(アップル)のサイトで使われているようなカッコいいスライダーが実現できそうですね。

サンプルページを作ってみました。(サンプルで紹介しているアイテムは実際にご購入できます。)

→ ネットショップに最適。目を引くクールな商品スライダー「Simple Multi-Item Slider 」サンプル

商品数の限られたネットショップのトップページや、注目アイテムの紹介などにも活用できそうです。

→「ネットショップに最適。目を引くクールな商品スライダー「Simple Multi-Item Slider 」」の続きを読む

タイル状のエフェクトが美しい画像スライダーjQueryプラグイン「jq-tiles」

「jq-tiles」はお洒落なCSS3エフェクトが選べる画像スライドショー用jQueryプラグインです。CSS3ならではのふわっとしたエフェクトや立体感のあるエフェクトが用意されています。

サンプルはこちら

→ タイル状のエフェクトが美しい画像スライダーjQueryプラグイン「jq-tiles」サンプル

→「タイル状のエフェクトが美しい画像スライダーjQueryプラグイン「jq-tiles」」の続きを読む

写真が風に飛ばされるような効果のある画像スライド用jQueryプラグイン「Windy」

Windy – A Plugin for Swift Content Navigation

このjQueryプラグイン「Windy」を使用すると、まるで写真やカードが風でひらひらと飛ばされてしまっているように画像をめくっていくことができます。

サンプルを見て頂くと分かると思います。

→ 写真が風に飛ばされるような効果のある画像スライド用jQueryプラグイン「Windy」サンプル

このjQueryプラグイン「Windy」を使用して、あまりスペースがないところでも印象的にカッコ良く複数の画像を見せることができそうですね。画像だけでなくテキストや見出しも表示することができます。

jQueryプラグイン「Windy」の使用方法は続きをご覧下さい。

→「写真が風に飛ばされるような効果のある画像スライド用jQueryプラグイン「Windy」」の続きを読む