個人的に役立ったデザイン素材やTips、WEBサービス、役立つグッズ、あれやこれやをご紹介

レスポンシブ対応などコンテンツスライダー/スライドショー用jQueryプラグイン50+

  • 0
  • 2
  • 64
  • 0

サイトのコンテンツをリッチに見せるだけでなく、省スペースで数多くのコンテンツを効率的・効果的に表示できるスライダー。
今回は無料で利用できるバリエーション豊富なスライダー用jQueryプラグインをご紹介します。
画像のスライダーから、レスポンシブ対応、フルスクリーン対応のほか、目を引くアニメーションによる画像の切り替えやコンテンツそのもののスライダーなど、多くのプラグインを集めてみました。
今後のコンテンツ制作にお役立ていただければ幸いです。

Swiper

レスポンシブ対応などコンテンツスライダー/スライドショー用jQueryプラグイン50+
レスポンシブ対応で、スマホなどのタッチデバイスでのフリッカブル(スワイプ)にも対応したコンテンツスライダー。
オートプレイのほか、縦スライドや3Dエフェクト、ネスト構造(コンテンツにさらにスライダーを設置できる)対応と、幅広い表現が可能な、使い勝手のよいスライダーです。
設置も簡単、スワイプの反応もよい。
本当にオススメのスライダーです。
DemoSwiper

ResponsiveSlides.js

ResponsiveSlides
軽量かつ実装も簡単なシンプルスライダー。
レスポンシブ&オートプレイ対応。
ResponsiveSlides.js

Flexslider

1.jquery-image-and-content-slider-plugin
軽量で扱いやすい人気のスライダー。
レスポンシブ&オートプレイ対応です。
DemoSource

Simple Multi Item Slider

8.jquery-image-and-content-slider-plugin
高機能でゴージャス感があるスライダー。
メニュー部分のカテゴリーをクリックすると、該当する商品がインパクトのある動きで表示されます。
レスポンシブ対応です。
DemoSource

Responsive Image Gallery with Thumbnail Carousel

7.jquery-image-and-content-slider-plugin
レスポンシブ対応のスライダー。
DemoSource

Elastic Content Slider

10.jquery-image-and-content-slider-plugin
タブを切り替えるようにスライドするスライダー。
こちらもレスポンシブ対応です。
DemoSource

Vertical Showcase Slider

13.jquery-image-and-content-slider-plugin
垂直に画像がスライドする珍しいタイプのスライダー。
レスポンシブにも対応しています。
DemoSource

Triple Panel Image Slider

14.jquery-image-and-content-slider-plugin
3Dの3つ折パンフに表示されている画像が切り替わるというユニークなスライダー。
細かなアニメーションも印象的です。
レスポンシブ対応。
DemoSource

Supersized

44.jquery-image-and-content-slider-plugin
フルスクリーン&レスポンシブに対応したスライダー。
サムネールの表示・非表示ボタンやオートプレイなど、高機能なスライダーです。
オートプレイ対応。
DemoSource

Raccordion

50.jquery-image-and-content-slider-plugin
レスポンシブにも対応したアコーディオン形式のスライダー。
キャプション表示もあります。
DemoSource

zAccordion

20.jquery-image-and-content-slider-plugin
数年前ならFlashでの実装が当たり前だったアコーディオン形式のスライダー。
スライドした瞬間のバウンスアニメーションも印象的です。
レスポンシブ&オートプレイ対応。
DemoSource

Galleria

30.jquery-image-and-content-slider-plugin
レスポンシブ、タッチデバイスに対応したスライダー。
画像だけでなく、YouTubeやViemoなどにも対応しています。
DemoSource

Camera Slideshow

57.jquery-image-and-content-slider-plugin
画像切替時のアニメーションがバリエーションに富んでいるシンプルなスライダー。
レスポンシブ&オートプレイ対応。
DemoSource

Elastislide

59.jquery-image-and-content-slider-plugin
レスポンシブに対応したサムネール表示用スライダー。
水平バージョンと垂直バージョンがあります。
DemoSource

Blueberry

60.jquery-image-and-content-slider-plugin
レスポンシブ&オートプレイ対応のシンプルスライダー。
DemoSource

Responsive jQuery Content Slider

62.jquery-image-and-content-slider-plugin
レスポンシブ&オートプレイ対応のシンプルスライダー。
スワイプ対応のほか、ビデオ表示にも対応しています。
DemoSource

Nivo Slider

76.jquery-image-and-content-slider-plugin
レスポンシブに対応したシンプルなスライダー。
画像の切り替えアニメーションが画像ごとに異なるのが特長。
DemoSource

wmuSlider, a jQuery responsive Slider

88.jquery-image-and-content-slider-plugin
レスポンシブ対応のスライダー。
オートプレイ対応。
Source

Coin Slider

78.jquery-image-and-content-slider-plugin
レスポンシブ&フルスクリーン&オートプレイ対応のスライダー。
画像切替のアニメーションが、多のスライダーと異なるインパクトを持っています。
そのほか、スワイプ対応など、機能も充実しています。
DemoSource

Bubble Slideshow Effect with jQuery

2.jquery-image-and-content-slider-plugin
画像の切替時に、泡が現れて徐々に画像が切り替わります。
オートプレイ対応。
DemoSource

Coding a Rotating Image Slideshow w/ CSS3 and jQuery

3.jquery-image-and-content-slider-plugin
画像が切り替わるときに、画像が一回回転してから切り替わります。
DemoSource

HTML5 Slideshow w/ Canvas & jQuery

4.jquery-image-and-content-slider-plugin
フェードイン・フェードアウトで画像が切り替わる一般的なスライダー。
DemoSource

Making a Mosaic Slideshow With jQuery & CSS

5.jquery-image-and-content-slider-plugin
画像が切り替わるときに、モザイク状に少しずつ画像が切り替わるスライダーです。
DemoSource

Apple-style Slideshow Gallery With CSS & jQuery

6.jquery-image-and-content-slider-plugin
アップルのサイトのようなクールなスライダー。
オートプレイ対応。
DemoSource

Full Width Image Slider

9.jquery-image-and-content-slider-plugin
こちらもフルスクリーン対応のスライダー。
DemoSource

Fullscreen Slit Slider

11.jquery-image-and-content-slider-plugin
フルスクリーン対応のスライダー。
画像切替時のアニメーションが印象的。
DemoSource

Swift Content Navigation

12.jquery-image-and-content-slider-plugin
こちらも画像切替時のパラパラと画像をめくっていくアニメーションが印象的なスライダー。
DemoSource

Parallax Content Slider

15.jquery-image-and-content-slider-plugin
要素がパララックスで切り替わる、とってもクールなスライダー。
オートプレイ対応。
DemoSource

Elastic Image Slideshow

16.jquery-image-and-content-slider-plugin
サムネールの表示が印象的なポップアップアニメーションのスライダー。
画像切替時にも、文字と画像がパララックスで表示されます。
オートプレイ対応。
DemoSource

Rotating Image Slider

17.jquery-image-and-content-slider-plugin
表示されている画像が順番に切り替わるという目を引くスライダー。
DemoSource

Parallax Slider With jQuery

21.jquery-image-and-content-slider-plugin
パララックス効果を用いたスライダー。
マウスオーバーでサムネールが微妙に動くアニメーションも。
DemoSource

Animated Portfolio Gallery

23.jquery-image-and-content-slider-plugin
左サイドにあるサムネールをクリックすると、コンテツがパララックスアニメーションで表示されるスライダー。
DemoSource

Tiny Circle Slider

24.jquery-image-and-content-slider-plugin
画像コンテツのナビゲーションが円形になっているスライダー。
オートプレイ対応。
DemoSource

Simple Content Slider

27.jquery-image-and-content-slider-plugin
シンプルながら、タイトル、画像、説明がパララックスで表示されるスライダー。
オートプレイ対応。
DemoSource

Pikachoose

29.jquery-image-and-content-slider-plugin
コンテンツ下にサムネールが並ぶ、シンプルかつ典型的なスライダー。
オートプレイ対応。
DemoSource

s3Slider

31.jquery-image-and-content-slider-plugin
画像の切り替え後に少し遅れてタイトルと解説が表示されるスライダー。
タイトルと解説の表示には3タイプあります。
オートプレイ対応。
DemoSource

jQuery Popeye

32.jquery-image-and-content-slider-plugin
小さなスペースでのスライド表示が可能なスライダー。
画像切替時には解説orキャプションの表示ができるタイプも用意されています。
DemoSource

Easy Slider

33.jquery-image-and-content-slider-plugin
左右にナビゲーションが付いたシンプルな形式のスライダー。
オートプレイ対応。
DemoSource

Galleriffic

34.jquery-image-and-content-slider-plugin
写真ギャラリーに適したスライダー。
多くの画像を表示することが可能です。
DemoSource

Beautiful jQuery slider tutorial

35.jquery-image-and-content-slider-plugin
画像上にナビゲーションとキャプションを表示するシンプルなスライダー。
オートプレイ対応。
DemoSource

Timelinr

49.jquery-image-and-content-slider-plugin
ポートフォリオや会社概要などで使えそうな、タイムラインにそって画像と解説が切り替わるスライダーです。
オートプレイにも対応しています。
DemoSource

Quake Slider

52.jquery-image-and-content-slider-plugin
画像切替時のアニメーションがバリエーションに富んでいるスライダー。
キャプション表示もあります。
オートプレイ対応。
DemoSource

SmartGallery

53.jquery-image-and-content-slider-plugin
シンプルなスライダーですが、画像切替時のアニメーションがバリエーション豊富です。
オートプレイ対応。
DemoSource

Smart Background Slider

55.jquery-image-and-content-slider-plugin
フルスクリーン対応の背景画像用スライダー。
オートプレイ対応。
DemoSource

Skitter

56.jquery-image-and-content-slider-plugin
シンプルなスライダーですが、画像切替時のアニメーションがバリエーション豊富。
左右のナビゲーションは5タイプあります。
オートプレイ対応。
DemoSource

The Slidorion

61.jquery-image-and-content-slider-plugin
画像切替時に、タイトルと解説がアコーディオン形式で切り替わるスライダー。
オートプレイ対応。
DemoSource

Minimit

Minimit
コンテンツ内の複数要素をスライドによって順番に表示する他のスライダーとは異なるスライダーです。
オプションも豊富にで、表示コンテンツのコントロール、アニメーション、操作方法などを設定できます。
DemoSource

Fullscreen Slideshow With HTML5 Audio and jQuery

66.jquery-image-and-content-slider-plugin
フルスクリーン&動画・音声表示に対応したスライダー。
DemoSource

Shutter Effect Portfolio with jQuery and Canvas

70.jquery-image-and-content-slider-plugin
シャッターを切ったようなアニメーションで画像が切り替わるスライダー。
オートプレイ対応。
DemoSource

Awkward Showcase

75.jquery-image-and-content-slider-plugin
6タイプの表示形式が揃ったスライダー。
オートプレイ対応。
DemoSource

Flux Slider

77.jquery-image-and-content-slider-plugin
画像の切り替えアニメーションが充実しているスライダー。
2Dや3Dでの切り替えが目を引きます。
DemoSource

Featured Content Slider Using jQuery UI

86.jquery-image-and-content-slider-plugin
左にサムネールと解説、右にコンテンツとタイトル・解説が表示される、メーカーのプロダクトで紹介よく見かけるタイプのスライダーです。
DemoSource

3D Gallery With CSS3 and jQuery

89.jquery-image-and-content-slider-plugin
3Dアニメーションで画像が切り替わるスライダー。
オートプレイ対応。
DemoSource

Orbit

90.jquery-image-and-content-slider-plugin
シンプル&軽量なコンテンツスライダーです。
DemoSource

Start/Stop Slider

92.jquery-image-and-content-slider-plugin
画像とタイトル・解説が順番に表示されるスライダー。
オートプレイ対応。
DemoSource

Agile Carousel

94.jquery-image-and-content-slider-plugin
5種類のタイプから選べるスライダー。
サムネール&解説つきのものもあります。
オートプレイ対応。
DemoSource

Muslider

96.jquery-image-and-content-slider-plugin
軽量で動画やテキストなども利用できるスライダー。
オートプレイ対応。
DemoSource

jQuery Common Accordion – Horizontal & Vertical

97.jquery-image-and-content-slider-plugin
4種類のアコーディオン形式から選べるスライダー。
オートプレイ対応。
DemoSource

Mask Transition Slideshow With jQuery

100.jquery-image-and-content-slider-plugin
モザイク状に画像が切り替わるタイプのスライダー。
オートプレイ対応。
DemoSource

お役に立てましたら、以下どれでも結構のですので、ポチリと……。

  • 0
  • 2
  • 64
  • 0

Amazonアソシエイト・プログラム規約による記載
当サイトはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。

この記事を読んだ人はこんな記事も読んでいます

写真/画像に3DCGポリゴン風エフェクトをかけてくれる無料/フリージェネレーター5つ

背景に使いたい!美しくカラフルなトライアングルメッシュ画像をSVGとして作成できるjsライブラリー「Trianglify」

最近よく見かける背景画像といえば、美しいボケ味の効いた画像やカラフルなピクセルパターンですが、美しく

記事を読む

リボン風の見出しをCSS3だけで実装する方法

リボン風の見出しをCSS3だけで実装する方法

見出しでリボン風の装飾をCSS3だけで実装する方法をご紹介します。 利用するのはboderプロパテ

記事を読む

UIのインスピレーションに最適な「UXPorn」

UIデザインのインスピレーションで溢れてる「UXPorn」

サイトやWEBサービスをつくるときにどのようなUIデザインにするかは悩むところですよね。 UIをつ

記事を読む

いまさら聞けない無料のアイコンフォントの導入の仕方・使い方

アイコンフォントを今頃になってようやく使ってみました。 最初は正直よくわからず、戸惑ってしまいまし

記事を読む

一石二鳥!ベンダープレフィックスをブラウザ上で追加し、CSSのミスも指摘してくれる「Autoprefixer」

一石二鳥!ベンダープレフィックスをブラウザ上で追加し、CSSのミスも指摘してくれる「Autoprefixer」

ベンダープレフィックスvendor prefixesをブラウザ上で追加してくれたうえで、CSSのミス

記事を読む

これは簡単!CSSだけで棒グラフが作成できてしまう「chart.css」

これは簡単!CSSだけで棒グラフ/チャートが作成できてしまう「chart.css」

CSSだけで棒グラフ/チャートが作成できてしまう「chart.css」をご紹介します。 CSSファ

記事を読む

2013年のベストjQueryプラグイン47

2013年も残すところわずかになりました。 今年もたくさんのjQueryプラグインが発表されていま

記事を読む

セキュリティー/プライバシーにすぐれたブラウザ6選

IE、Chrome、Safari、Firefoxといったメジャーブラウザ以外にもたくさんのブラウザが

記事を読む

タイポグラフィ/WEBフォントに関する作業を簡単にするツール14

WEBフォントがどんどん使われるようになるにつれ、関連するツールもたくさん出来てきています。 多い

記事を読む

デザインのインスピレーションに最適!パーツ/テーマごとのWEBデザイン見本帳「calltoidea」

WEBデザインのインスピレーションに最適!パーツ/テーマごとのデザイン見本帳「calltoidea」

WEBデザインのインスピレーションに最適なパーツ/テーマごとのWEBデザイン見本帳「calltoid

記事を読む