カルーセル プラグイン

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


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

関連記事

Wysiwygエディタ用プラグイン「CKEditor」

「CKEditor」は、Wysiwygエディタを実装できるプラグインです。 ダウンロード | デモ スクリプト 実装 文字数・単語数のカウント表

画像ズーム プラグイン

画像をズームしてくれるプラグインには、ツールチップ的にサムネイルにマウスオーバーした部分をズームアップしたり元画像を表示したり、その画像内でインナーズームする というような機能があるようです。

数値入力スライダー「jQuery Simple Slider」

「jQuery Simple Slider」はスライダーを使用して数値設定が行えるようにしてくれるjQueryプラグインです。"Unobtrusive Numerical Slider"とあるように余

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

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

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

Twitter Bootstrap Modalは、標準のモーダルウィンドウに様々な機能を追加することができます。 Twitter Bootstrap純正スクリプト ダウンロード / サイト

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

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

no image

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

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

no image

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

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

no image

ローソク足チャート「jqPlot」

「ローソク足チャート」は株価の4本値を表示するグラフでよく使われるグラフです。 一つのプロットでOHLC(Open, High, Low, Close) それぞれ、Openは始値、Highは高値、

わずかなコードで画像をサムネイル化してくれる「MyThumbnail.js」

サムネイル化してくれるJQueryプラグインは数多くありますが、この「MyThumbnail」はわずか数行で簡単にページ上の画像を指定サイズにサムネイル化してくれます。 ダウンロード 画像とし

Comment

Message

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

*

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

    PAGE TOP ↑