div要素にして画像もテキストもリンクもまとめてスライドさせる「jQuery Slider2」
高機能過ぎるjQueryスライドショー「Camera slideshow」
ページをめくり効果が美しい。雑誌や本のようにページをめくれるjQueryプラグイン「turn.js」
シンプルなサムネイル画像つきスライダーjQueryプラグイン「AD Gallery」
ルーレット風なものが作れるjQueryプラグイン「Roulette.js 」
クリックすると横からメニューが現れるjQueryプラグイン『Sidr』
レスポンシブでふわっと表示されるドロップダウンメニューを実装する「Responsive Multi-Level Menu」
超絶簡単にワンページスクロールサイトが作れるjQueryプラグイン『Smint』
クリックするとメニューが上から現れる『Top Drawer – A smooth dropdown menu for responsive web design』
ページの背景に画像をフルスクリーンで表示させ、画像の切り替えも可能なjQueryプラグイン「Backstretch」
jQueryプラグインとCSS3 を利用した画像やテキスト用のレスポンシブ対応スライダーです。
このjQueryプラグインを使用すると、スマホやタブレット・デスクトップなど画面サイズの大小に関わらず、スライドショーの幅や画像の大きさを調整してくれます。また、
などの機能があります。
まずはこちらのサンプルをご覧ください。
「Responsly.js」を用いたレスポンシブスライドショーの設置方法は続きをどうぞ。
以前に、背景にフルスクリーン画像をスライダーで流すjQuery「maxImage Scaling Plugin」を紹介しましたが、本家のサイトの運営が再開されていないようです。
「maxImage Scaling Plugin」と同じように背景に画像をウィンドウズサイズに調節してフルスクリーン表示させることができるのが、このjQueryプラグイン「Backstretch」です。
少し、手を加えることで背景でスライドショーとして画像を流すことも出来ます。
サンプルを３パターン作ってみました。
簡単に設定できるのと、背景画像を最後に表示させることでメインのコンテンツが表示されるまで待つ必要がないのが特徴です。
設定の方法は続きをどうぞ。
→「ページの背景に画像をフルスクリーンで表示させ、画像の切り替えも可能なjQueryプラグイン「Backstretch」」の続きを読む
サイトの背景で画像をフルスクリーンで表示させて、かつその画像を自動的にスライドショーとして流したいという時に使えるのがこのjQuery「jmaxImage Scaling Plugin」
jQueryを使用して、好きな画像ををサイトの背景でフルスクリーンで流すことができます。
ということで、サンプル作ってみました。こんな感じになります。
→「背景にフルスクリーン画像をスライダーで流すjQuery「maxImage Scaling Plugin」」の続きを読む
「Nivo Slider」は画像をかっこよくスライドさせて見せたい方にぴったりの画像スライダーです。
16種類ものエフェクト効果があり、それらをランダムに使用することもできます。
まずはサンプルをご覧ください。
「Nivo Slider」の使用方法は続きをご覧下さい。
→「スライドするときのエフェクトがたくさんあるかっこいいjQuery画像スライダー「Nivo Slider」」の続きを読む
【注意】2019/10 こちらの記事は、古くなったため記事をリライトして引越ししいたしました。→ 最新の情報はこちらをご覧ください。
「jQuery Slider2」は、簡単に画像や文字をスライドさせる軽量のJavaScriptです。
<div>～</div>で囲んだdiv要素ごとにスライドさせるという便利なスライダーです。
サンプルはこちら
「jQuery Slider2」の設置方法は続きをご覧下さい。
© 2024 ぱんにゃっとTutorial
Theme by Anders Norén — Up ↑