カルーセル プラグイン

「カルーセル(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 サイト


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

関連記事

no image

日付入力に便利な「Datepicker for Bootstrap」

「Datepicker for Bootstrap」はテキストボックスにカレンダーを表示して日付入力を便利にしてくれるjQueryプラグインです。 目次 Datepicker for Boot

Bootstrap Modal + 拡張機能が実装できるプラグイン

Twitter Bootstrap Modalは、標準のモーダルウィンドウに様々な機能を追加することができます。 2014/06/16 Bootstrap3対応版に書き換えをしました。

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

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

no image

定期的にAjaxリクエストを送信してくれる「PeriodicalUpdater」

PeriodicalUpdaterは、定期的にpostもしくはgetリクエストを送信してくれるjQueryプラグインです。Twitterのタイムラインのように定期的にツイートをロードしてくれるようなや

入力テキストの文字数をカウントしてくれる「Textchange」

Twitterのようにinputやtextareaに入力した際に、文字数をカウント(ダウン)してくれるとユーザの利便性が上がります。今回使用したTextChangeは、それ以外にも入力のイベントに対し

クレジットカード番号のバリデーションとカード会社を特定してくれる「jQuery Credit Card Validator」

「jQuery Credit Card Validator」は、クレジットカード番号のバリデーションを行ってくれるjQueryプラグインです。入力したカード番号の検証とそれに基づいてカード会社の表示を

シンプルでカスタマイズ豊富なスライダー用プラグイン「bxSlider」

「bxSlider」はシンプルに設置でき、かついろいろとオプションが設定可能なスライダー用プラグインです。サイト CDN 標準でもしくはオプションで実現できそうなこと スワイプ キャプション

no image

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

jqPlotを使って棒グラフを作成してみました。ベースはこの記事を参照ください。 スクリプト jqPlotのベースとなるjsファイルと以下の棒グラフの作成に必要なスクリプトを読み込んで下さい。

no image

数値入力に便利なステッパーを実装「Numeric Stepper」

「Numeric Stepper」は、数値用のステッパーを実装できるjQueryプラグインです。ダウンロード | デモ スクリプト 実装 既存のテキストボックスにclas

Amazonのような画像ズーム機能が実装できる「SergeLand Image Zoomer」

「SergeLand Image Zoomer v3.0」はAmazonなどでみられるマウスオーバーで画像をズームしてくれる機能を実装できるjQueryプラグインです。 ダウンロード *黄色ボタン

Comment

Message

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

*

PAGE TOP ↑