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>
関連記事
-
-
グリッドレイアウト プラグイン
Waterfall サイト pinbox [browser-shot url="http://kayschneider.github.io/pinbox/example/pinb
-
-
エフェクト豊富なニュースティッカー用プラグイン「inewsticker」
「inewsticker」は、色々なエフェクトでニュースティッカーが実装できるjQueryプラグインです。ダウンロード エフェクトには、fade/slide/typingの3つが可能です。 デ
-
-
シンプルでカスタマイズ豊富なスライダー用プラグイン「bxSlider」
「bxSlider」はシンプルに設置でき、かついろいろとオプションが設定可能なスライダー用プラグインです。サイト CDN 標準でもしくはオプションで実現できそうなこと スワイプ キャプション
-
-
実装方法が選べるツールチップ用プラグイン「Smallipop」
Smallipopは、ツールチップの実装をマークアップベース(HTMLに書き出し)とJavascriptベース両方で行えるjQueryプラグインです。世の中この手のツールは結構片方でのみだったりします
-
-
テキストに動きをつけるプラグイン
テキストをフェイド・スライド「Textillate」 テキストをフェイドイン(アウト)、スライドイン(アウト)してくれます。 ダウンロード デモ My Tit
-
-
Wysiwygエディタ用プラグイン「CKEditor」
「CKEditor」は、Wysiwygエディタを実装できるプラグインです。 ダウンロード | デモ スクリプト 実装 文字数・単語数のカウント表
-
-
シンプルな画像スライダー/ギャラリー用プラグイン
スライダーやギャラリーを実装できるjQueryプラグインのうちシンプルなものを集めてみました。ベースはシンプルですが、オプションなどを使用してカスタマイズが豊富なものもたくさんありますね。 シン
-
-
グラフ作成 プラグイン
C3.js C3.js サイト [browser-shot url="http://www.chartjs.org/" width="200" imgclass=" ali
-
-
レスポンシブに対応した画像ギャラリーが実装できる「Responsive Image Gallery」
「Responsive Image Gallery with Thumbnail Carousel」はレスポンシブにも対応した画像ギャラリーが実装できるjQueryプラグインです。Twitterの「最
-
-
画像ギャラリーを実装できる「Galleria」
Galleriaは、わずか数行で画像ギャラリーが作成できるjQueryプラグインです。Airbnbのページで使用されていて、コレいいな~と思い試してみました。 ナビゲーション内にサムネイルを
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