「Slider Pro」は多機能のスライダーを作ることができるjQueryプラグインです。このjQueryプラグインを使って、左右の画像をみせることができるカルーセル型のスライダーを作ってみます。
このような感じになります。
サンプルはこちらをごらんください。
「Slider Pro」サンプル
設置方法は続きをご覧ください。
Categoryスライダー
jQueryプラグイン「Glide.js」を利用すれば、スマホ・タブレット・デスクトップに対応したスライドショーを簡単に設置することができます。
特徴は、スマホなどの画面からスライダーを指でスワイプすることで画像などのコンテンツを切り替えれることです。また4.5kbと超軽量なのでサクサク動きます。
画面の大きさによって自動的にサイズが切り替わるレスポンシブになっています。
タッチデバイスと相性が良いスライダーでは、今のところこのjQueryプラグイン「Glide.js」が一番かもしれません。
サンプルを作ってみました。
タッチデバイス対応のスライダーjQueryプラグイン「Glide.js」サンプル
オールドブラウザでも動くように配慮してあるとのこと。スワイプだけでなくキーボードの矢印キーやスライダー上のメニューからも切り替えることができます。
カルーセルとは、画像やテキストなどのコンテンツを横にスライドさせながら表示させるWebデザインです。Amazonや楽天などのECサイトでもよく見られますね。
カルーセルを実装するjQueryプラグインやJavascriptはいろいろなサイトで多数紹介されていますが、ここではおなじみの＜ul＞要素を自動的にカルーセルに変換して表示してくれるjQueryプラグイン『dbpasCarousel』を紹介します。
サンプルをご覧下さい。
→「ul要素を簡単にカルーセルに変換してくれるjQueryプラグイン『dbpasCarousel』サンプル」
設定もいたって簡単。jQueryを読みこませて、＜ul＞タグと＜li＞タグを利用してリスト表示で記述するだけです。
では使用方法をみてみましょう。
今まで、サムネイル付きスライダーを紹介したことなかったので、今回はサムネイル画像を表示させた画像スライダーをご紹介します。
最近、動きが凝ったjQueryのスライダー用のjQueryプラグインもいろいろ登場していますが、シンプルなサムネイル付きスライダー用のjQueryプラグインが必要なこともあるかと思います。
設置も難しくないですので、トップ画像に利用したり、ギャラリーにしたりと用途は広いです。
サンプルを作ってみました。
シンプルなサムネイル画像つきスライダーjQueryプラグイン「AD Gallery」サンプル
各ブラウザにも対応しています。軽くて設置もしやすいので、おすすめのスライダーです。
Firefox 3.5以降 , IE6以降, Chrome2以降 , Safari4以降, Opera9以降に対応しています。
高機能過ぎるjQueryスライドショー「Camera slideshow」という記事でご紹介したスライドショー「Camera slideshow」をフルスクリーンで背景にする方法をご紹介します。
サンプルを作ってみました。ご覧下さい。
→「Camera slideshow」をフルスクリーンで背景にするサンプル
フルスクリーン用のスタイルを追加してあげる必要がありますが、比較的簡単に導入できると思います。良い感じのフルスクリーンスライドショーになります。どうぞお試し下さい。
今回は、丸いめんこのようなイメージ画像をひっくり返しながらクルクル切り替えるスライドショーを紹介します。（めんこといっても若い人にはわからないかもしれませんが、他に良い例えが浮かばなかったので。）
では、サンプルを作ってみましたのでご覧下さい。
→『Flipping Circle Slideshow』サンプル
最近はこのようなサークルのカタチが流行っているようですね。設置も簡単ですので、活用してみて下さい。
→「めんこのように丸い画像がクルクル回るイメージスライドショー『Flipping Circle Slideshow』」の続きを読む
「Camera slideshow」は細かいところまであらゆる設定ができる高機能のjQueryスライドショーです。
デフォルトの状態でも十分に機能しますが、スキンやエフェクト、メーターの種類やナビゲーション、画像別に見せる時間を変えるなど様々な設定が可能です。
また、レスポンシブ対応しています。設定によってはフルスクリーンでのスライドショーを背景に設定することもできます。動画を組み込むことも可能です。
サンプルを作ってみました。
→「高機能過ぎるjQueryスライドショー『Camera slideshow』サンプル」
（追加記事：jQueryスライドショー「Camera slideshow」をフルスクリーンで背景にする方法）
軽くて使いやすいですので、どの画像ギャラリースライダーを使おうか迷った時の選択肢のひとつに良いと思います。
ネットショップでアイテム紹介に使える商品スライダーのソースを紹介します。CSSとjQueryを使用してあります。
シンプルかつ、モダンなインパクトのあるアイテムスライダーです。
カテゴリーごとにアイテムが横に飛び去っていくような効果があり、スピード感があります。
Apple（アップル）のサイトで使われているようなカッコいいスライダーが実現できそうですね。
サンプルページを作ってみました。（サンプルで紹介しているアイテムは実際にご購入できます。）
→ ネットショップに最適。目を引くクールな商品スライダー「Simple Multi-Item Slider 」サンプル
商品数の限られたネットショップのトップページや、注目アイテムの紹介などにも活用できそうです。
→「ネットショップに最適。目を引くクールな商品スライダー「Simple Multi-Item Slider 」」の続きを読む
「jq-tiles」はお洒落なCSS3エフェクトが選べる画像スライドショー用jQueryプラグインです。CSS3ならではのふわっとしたエフェクトや立体感のあるエフェクトが用意されています。
サンプルはこちら
→ タイル状のエフェクトが美しい画像スライダーjQueryプラグイン「jq-tiles」サンプル
Windy – A Plugin for Swift Content Navigation
このjQueryプラグイン「Windy」を使用すると、まるで写真やカードが風でひらひらと飛ばされてしまっているように画像をめくっていくことができます。
サンプルを見て頂くと分かると思います。
→ 写真が風に飛ばされるような効果のある画像スライド用jQueryプラグイン「Windy」サンプル
このjQueryプラグイン「Windy」を使用して、あまりスペースがないところでも印象的にカッコ良く複数の画像を見せることができそうですね。画像だけでなくテキストや見出しも表示することができます。
jQueryプラグイン「Windy」の使用方法は続きをご覧下さい。
© 2024 ぱんにゃっとTutorial
Theme by Anders Norén — Up ↑