幅が異なる要素にも対応可能なカルーセルを実装するjQueryプラグイン・Lemmon Slider
以前やろうと思ったカルーセルを 実装できるプラグインが配布されて いたので備忘録。幅の異なる要素 にも対応できるカルーセルです。 多くのカルーセルやスライダーは サイズ固定ですよね・・・ 多くのカルーセル系スクリプトは、一度に進む幅が一定の値にされているため、回す要素のサイズを統一する必要がありました。Lemmon Sliderは異なるサイズの要素を並べてもそれぞれの幅を判別して送ってくれます。 上記のように幅の異なるアイテムでも幅を解析してスライドさせたときにピッタリ揃えてくれます。また、IE6などのオールドブラウザにも対応しています。 動作サンプルです。 div等のボックス要素も対応可能、画像もサイズを指定する必要は無く、幅を解析して自動でそろえてくれます。 コード<script type='text/javascript' src='http://ajax.googleapis.co
ウィンドウサイズに合わせてレスポンシブ表示するカルーセルスライドのjQueryプラグイン-Elastislide
Modified 2015-06-02 更新情報 プラグインのバージョンアップに伴い使用方法が変更されていたため記事内容を改めました。 表示するウィンドウのサイズに合わせて、画像サイズを変更して表示するカルーセルスライドのjQueryプラグインです。オプションを指定して、表示画像のサイズや、表示場所、スピード等が設定できます。使い方などをまとめました。 この記事は jquery.elastislide.js の v1.1.0 についての使用方法です。バージョンが違う場合は使い方やオプションも変更されている可能性があるため、配布元のページにて使用方法をご確認下さい。 サンプルデモ 配布元のサンプルデモ Elastislide – A Responsive Image Carousel ダウンロード スクリプトは以下のページ、 codrops/Elastislide 又は、以下のページよりダウ
拡大時にアコーディオンのように画像が広がるカルーセルを実装するjQueryプラグイン・Accarousel
クリックで画像を拡大する際に アコーディオンのように広がる カルーセルを実装するjQueryの プラグイン・Accarousel。機能 はシンプルですが、動きが好み だったので備忘録。 カルーセルを実装するjQueryプラグインです。 見た目は普通のカルーセルですが、画像をクリックすると以下のように拡大されます。 なんと言うか、横にブワッと広がる感じ。ブワッと。 頭悪いから上手く言えないのでサンプル見てください。 Sample コード<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script> <script type="text/javascript" src="jquery.cjAccarousel.min.js"></scri
関連アイテムを出す場合等に使えそうなjQueryカルーセル「bxCarousel」:phpspot開発日誌
bxCarousel | jQuery Carousel Plugin 関連アイテムを出す場合等に使えそうなjQueryカルーセル「bxCarousel」 次のようなUIでamazonの関連商品を出すような場合に使えそうです。 個々のアイテム自体はulリストで定義するだけなので簡単。 ブログ記事の最後なんかに設置することもできそう 関連エントリ JavaScriptで実装するクルクル回転する3DカルーセルUI実装ライブラリ 高速に動作する画像カルーセルＵＩ実装用jQueryプラグイン「Agile Carousel」 無限に回転するカルーセルＵＩ実現用jQueryプラグイン実装チュートリアル カルーセルやページャ機能がついたYUI 2.6.0がリリース
カスタマイズ性に優れた ｊQueryカルーセルプラグイン (jCarousel Lite) -稀によくあるブログ
折りたたむ ここではthickboxと併用した時のサンプルソースを 書いてありますが、thickboxを使用しない場合は thickboxの部分を削除してください。 スタイルシートは配布されていないようなので 自分で設定してください。 以下は管理人が最低限これがあればいいかな? って感じで書いたものなので、信頼性は低いです。 <style> .anyClass{margin:0 auto 5px;} .prev{float:left;margin:48px 5px 0 0;} .next{float:right;margin:50px 2px 0 5px;} </style> /*thickboxのスタイルシート*/ <link rel="stylesheet" href="./thickbox_sample.css" type="text/css"
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://grow.weblike.jp/immature_design/javascript/178.html
jQuery Content Slider | Responsive jQuery Slider | bxSlider
