ECサイトの商品表示に使えそうなスライダー「Simple Multi-Item Slider」

「Simple Multi-Item Slider」は、いうなればネスト型の画像スライダーです。ECサイトでの商品陳列からサムネイルメニューなどにも使用できそうです。ダウンロード デモ
スクリプト
<link href="css/style.css" type="text/css" rel="stylesheet"> <script src="js/jquery.catslider.js" type="text/javascript"></script> <script src="js/modernizr.custom.63321.js" type="text/javascript"></script>
実装
ナビゲーション(nav)を用意し、あとは、その順番通りにリスト要素(<ul>~</ul>)を記述していくだけです。
<div id="mi-slider" class="mi-slider"> <!-- nav1用--> <ul> <li><a href="#"><img src="画像1" alt="画像1"><h4>テキスト1</h4></a></li> <li><a href="#"><img src="画像2" alt="画像2"><h4>テキスト2</h4></a></li> <li><a href="#"><img src="画像3" alt="画像3"><h4>テキスト3</h4></a></li> <li><a href="#"><img src="画像4" alt="画像4"><h4>テキスト4</h4></a></li> </ul> <ul>.... </ul> <!-- nav2用--> <ul>.... </ul> <!-- nav3用--> <ul>.... </ul> <!-- nav4用--> <nav> <a href="#">nav1</a> <a href="#">nav2</a> <a href="#">nav3</a> <a href="#">nav4</a> </nav> </div> <script type="text/javascript"> $(function() { $('#mi-slider').catslider(); }); </script>
関連記事
-
-
レスポンシブに対応した画像ギャラリーが実装できる「Responsive Image Gallery」
「Responsive Image Gallery with Thumbnail Carousel」はレスポンシブにも対応した画像ギャラリーが実装できるjQueryプラグインです。Twitterの「最
-
-
テキストに動きをつけるプラグイン
テキストをフェイド・スライド「Textillate」 テキストをフェイドイン(アウト)、スライドイン(アウト)してくれます。 ダウンロード デモ My Tit
-
-
ファイルアップロードフォーム プラグイン
Ajax File Upload Form with jQuery Ajax File Upload Form with jQuery [browser-shot url="h
-
-
レスポンシブにも対応したカレンダーを表示する「Calendario.js」
Calendarioは、レスポンシブデザインにも対応したカレンダ表示プラグインです。 ダウンロード スクリプト 実装 $(document).ready
-
-
シンプルでカスタマイズ豊富なスライダー用プラグイン「bxSlider」
「bxSlider」はシンプルに設置でき、かついろいろとオプションが設定可能なスライダー用プラグインです。サイト CDN 標準でもしくはオプションで実現できそうなこと スワイプ キャプション
-
-
画像をモザイク処理(ピクセル化)してくれるプラグイン「Pixelate.js」
「Pixelate.js」はその名の通り画像をピクセル化してくれるjQueryプラグインです。画面ロード時にピクセル化しておき、画像にマウスオーバーすると暴露してくれます。 ダウンロード | デモ
-
-
selectボックスを華麗にしてくれる「Chosen」「Select2」
selectボックスに当てるjQueryプラグインを色々探してみましたがこれに決めました。シングルやマルチ、またグループにも対応しています。インスタンス検索してくれるのが決め手 Chosen CDN
-
-
エフェクト豊富なニュースティッカー用プラグイン「inewsticker」
「inewsticker」は、色々なエフェクトでニュースティッカーが実装できるjQueryプラグインです。ダウンロード エフェクトには、fade/slide/typingの3つが可能です。 デ
-
-
テーブル・リスト要素を便利にしてくれるプラグイン
レスポンシブに対応したテーブルを実装できる「FooTable」 リストをインクリメント検索・ソートできる「List.js」 colResizable #カラム幅可変
-
-
要素を折りたたみできる「nestedAccordion」
「nestedAccordion」は、クリックすると要素を開閉(折りたたみ)できるjQueryプラグインです。名前の通りネストして、アコーディオンの中にアコーディオンも実装できます。ダウンロードはこち
Comment
ECサイトの商品表示に使えそうなスライダー「Simple Multi-Item Slider」 http://t.co/dPHdaF5YwH
jQuery | ECサイトの商品表示に使えそうなスライダー「Simple Multi-Item Slider」 http://t.co/9x019Svg4D
jQuery | ECサイトの商品表示に使えそうなスライダー「Simple Multi-Item Slider」 http://bit.ly/1aO3rRY