カルーセル プラグイン

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

クリックするとテキストボックスにかわるラベルを実装

Flickrなどでは、写真の編集画面でキャプションをラベルとして表示しておきクリックするとテキストボックスやテキストエリアに変換してくれて編集させるようなインターフェイスを実装しています。結構いいです

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

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

カレンダー実装プラグイン「Bootstrap Calendar」

「Bootstrap Calendar」はBootstrap 3ベースでカレンダーが実装できるjQueryプラグインです。 ダウンロード スクリプト

no image

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

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

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

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

画像ズーム プラグイン

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

no image

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

「Timepicker for Bootstrap」は、テキストボックスへの時刻入力を便利にしてくれるjQueryプラグインです。 目次 実装方法 モダール形式 Datepicker

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

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

no image

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

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

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

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

Comment

Message

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

*

PAGE TOP ↑