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>
関連記事
-
-
入力されたメールアドレスのドメインをサジェストしてくれる「mailcheck.js」
「mailcheck.js」は、入力されたメールアドレスのドメインをサジェストしてくれるjQueryプラグインです。 ダウンロード スクリプト 実装 v
-
-
ファイルアップロードフォーム プラグイン
Ajax File Upload Form with jQuery Ajax File Upload Form with jQuery [browser-shot url="h
-
-
親要素の大きさに合わせて画像をリサイズ「imgLiquid」
「imgLiquid」は親要素の大きさに合わせて画像を縮小・切り取りを行ってくれるjQueryプラグインです。 ダウンロードはこちら スクリプト 実装
-
-
定期的にAjaxリクエストを送信してくれる「PeriodicalUpdater」
PeriodicalUpdaterは、定期的にpostもしくはgetリクエストを送信してくれるjQueryプラグインです。Twitterのタイムラインのように定期的にツイートをロードしてくれるようなや
-
-
様々なタイプのグラフ表示をカバーする「jqPlot」(折れ線グラフ)
Webページにグラフ表示する機会があったので、探してみました。 今回、使用してみた「jqPlot」がシンプルにもできてカスタマイズも豊富でいいです。グラフ用データの形式が少しクセがあり、動的に扱う際
-
-
表示パターン豊富なスライダー「flexslider 2」
「flexslider 2」は、シンプルに実装でき、かつカスタマイズ機能が豊富なスライダー用プラグインです。 flexslider 2 オプションや機能 サムネイルナビゲーション 複数表示
-
-
リストをインクリメント検索・ソートできる「List.js」
List.jsは、リストをインクリメント検索やソートができるjQueryプラグインです。 ダウンロードはこちら リストだけでなくテーブルにも実装可能のようです。 スクリプト
-
-
要素を折りたたみできる「nestedAccordion」
「nestedAccordion」は、クリックすると要素を開閉(折りたたみ)できるjQueryプラグインです。名前の通りネストして、アコーディオンの中にアコーディオンも実装できます。ダウンロードはこち
-
-
クレジットカード番号のバリデーションとカード会社を特定してくれる「jQuery Credit Card Validator」
「jQuery Credit Card Validator」は、クレジットカード番号のバリデーションを行ってくれるjQueryプラグインです。入力したカード番号の検証とそれに基づいてカード会社の表示を
-
-
レスポンシブに対応した画像ギャラリーが実装できる「Responsive Image Gallery」
「Responsive Image Gallery with Thumbnail Carousel」はレスポンシブにも対応した画像ギャラリーが実装できるjQueryプラグインです。Twitterの「最
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