カルーセル プラグイン

「カルーセル(Carousel)」とは"回転木馬"という意味らしいのですが、jQuery(Javascript)では画像やコンテンツをスライド表示させるもののようです。が、スライダーとの違いはよく分りません。(世の中を見渡した感じだと多分同じ意味です。)
ここでは、「カルーセル」を1つのスライダー内に同時に複数のコンテンツを表示させスライドさせていくと勝手に定義してまとめてみました。


iTunesのCover Flowのようなギャラリーが実装できる「ContentFlow」
色々なタイプの画像ギャラリーが実装できる「Rondell」
シンプルでカスタマイズ豊富なスライダー用プラグイン「bxSlider」
表示パターン豊富なスライダー「flexslider 2」


http://dbpas.github.io/dbpasCarousel/

dbpasCarousel

dbpasCarousel サイト


http://straydogstudio.github.io/film_roll/

FilmRoll

#レスポンシブ #全画面 #縦位置中心 #幅指定
FilmRoll サイト


http://sorgalla.com/jcarousel/examples/skeleton/

http://www.gmarwaha.com/jquery/jcarousellite/#demo

jCarousel Lite

jCarousel Liteサイト


http://i-like-robots.github.io/jQuery-Slideshow/

jQuery Slideshow

jQuery Slideshow サイト


http://owlgraphic.com/owlcarousel/index.html

http://www.owlcarousel.owlgraphic.com/

http://wmh.github.io/jquery-scrollbox/

Scrollbox

#縦スライド #横スライド
Scrollbox サイト


http://tulios.github.io/jquery.silver_track/

SilverTrack

#縦スライド #横スライド
SilverTrack サイト


http://kenwheeler.github.io/slick/

slick

#レスポンシブ #スワイプ #オートプレイ #lazyloading
slick サイト


http://darsa.in/sly/

Sly

#レスポンシブ #タッチイベント #縦スライド #横スライド #IE8+
Sly サイト


http://image-gallery-threejs.zholpe.com/

Image Gallery Threejs

#3D #IE9+
Image Gallery Threejs サイト


http://codepen.io/johnblazek/full/nceyw/

3D Carousel Using TweenMax.js and jQuery

#3D
3D Carousel Using TweenMax.js and jQuery サイト


  • このエントリーをはてなブックマークに追加

関連記事

「jqPlot」を使って円グラフを作成

Webサイトで円グラフ表示したいと要望があったので、以前使用したjqPlotでデモを作成しました。ダウンロード 最初の要望は「凡例つけて」、「いい感じにカラーリングしてほしい。」、「定期的に変更

no image

時刻入力に便利な「Timepicker for Bootstrap」

「Timepicker for Bootstrap」は、テキストボックスへの時刻入力を便利にしてくれるjQueryプラグインです。 2014/06/16 Bootstrap3対応版に書き換え

レスポンシブに対応したテーブルを実装できる「FooTable」

「FooTable」は、画面の大きさに合わせて表示をかえてくれるテーブルを実装できるjQueryプラグインです。かなり、シンプルに実装できます。ダウンロード #v2にアップデートされたため刷

タブを画面サイズによってアコーディオンにしてくれる「Easy Responsive Tabs to Accordion」

「Easy Responsive Tabs to Accordion」はタブ表示を画面サイズによって折りたたみのアコーディオン形式に変換してくれるjQueryプラグインです。 デフォルトでは、768

ナビゲーションメニューを画面サイズによってドロップダウンにしてくれる「TinyNav.js」

「TinyNav.js」はナビゲーションメニューを画面サイズがある以下になるとドロップダウンにしてくれるjQueryプラグインです。 スクリプト 実装 スタイルシート

ページの画像を非同期で読み込んでくれる「Lazy Load」

「LazyLoad Plugin」は、画像をページのロード時ではなく非同期に読み込んでくれるjQueryプラグインです。設定によりスクロールした際に画像をロードしたりしてくれます。 ダウンロード |

no image

グリッドレイアウト プラグイン

Waterfall サイト pinbox [browser-shot url="http://kayschneider.github.io/pinbox/example/pinb

テキストボックスの入力値を数値限定にしてくれる「jQuery - numeric」

「jQuery - numeric」は、テキストボックスへの入力を数字のみに制限してくれるjQueryプラグインです。正/負、整数/小数点 チェックまで限定してくれます。ダウンロード スクリプト

画像ギャラリーを実装できる「Galleria」

Galleriaは、わずか数行で画像ギャラリーが作成できるjQueryプラグインです。Airbnbのページで使用されていて、コレいいな~と思い試してみました。 ナビゲーション内にサムネイルを

マウスオーバーすると画像にキャプションを表示してくれる「Mosaic」

「Mosaic」は、画像などにマウスオーバーすると、キャプションをスライド(イン/アウト)もしくはフェイド(イン/アウト)させてくれるjQueryプラグインです。ダウンロードはこちら スクリプト

Comment

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

    PAGE TOP ↑