on:2012年6月13日sponsors伸び縮みするアコーディオンと回転木馬のようにスライドするカルーセルを合体させたスライダーを実装するjQueryのプラグインを紹介します。IE7+でご覧ください。デモページアコーディオンは各画像をクリックすると、アコーディオンのように画像が拡大表示されます。デモページ:4枚目をアコーディオンカルーセルは右下のナビゲーションでサムネイル画像をスライドさせます。起点と終点があるのがちょっと残念。実装は簡単で、3ステップです。外部ファイル「jquery.js」と当スクリプト・スタイルシートを外部ファイルとして記述します。※スタイルシートはLESS版も用意されています。HTMLカルーセル時とアコーディオン時の画像をリスト要素で実装します。JavaScriptラッパーをjQueryのセレクタで指定し、スクリプトを実行します。{$('#accarousel').cjAccarousel();});</script>スクリプトのオプションオプションではカルーセル時に表示する画像の数、アニメーションのスピード・エフェクトなどを設定できます。standカルーセル時の要素のclass名panelアコーディオン時の要素のclass名pagerClassページ送りのclass名xパネルのハンドラーのclass名groupOfカルーセル時に表示する要素の数scrollSpeedスクロールのスピードeaseエフェクトflyOutGapアコーディオン時の隙間nextPrevNext/Prevボタンの有無オプションを使用すると下記のようになります。Posts関連記事が見つかりませんでした。