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>
関連記事
-
-
シンプルでカスタマイズ豊富なスライダー用プラグイン「bxSlider」
「bxSlider」はシンプルに設置でき、かついろいろとオプションが設定可能なスライダー用プラグインです。サイト CDN 標準でもしくはオプションで実現できそうなこと スワイプ キャプション
-
-
要素を折りたたみできる「nestedAccordion」
「nestedAccordion」は、クリックすると要素を開閉(折りたたみ)できるjQueryプラグインです。名前の通りネストして、アコーディオンの中にアコーディオンも実装できます。ダウンロードはこち
-
-
レスポンシブ対応の画像スライダー・ギャラリー用プラグイン
画像スライダー(ギャラリー)を作成してくれるjQueryプラグインの中からレスポンシブ対応のものをいくつか集めてみました。 シンプルでカスタマイズ豊富なスライダー用プラグイン「bxSlide
-
-
エフェクト豊富なニュースティッカー用プラグイン「inewsticker」
「inewsticker」は、色々なエフェクトでニュースティッカーが実装できるjQueryプラグインです。ダウンロード エフェクトには、fade/slide/typingの3つが可能です。 デ
-
-
グラフ作成 プラグイン
C3.js C3.js サイト [browser-shot url="http://www.chartjs.org/" width="200" imgclass=" ali
-
-
Amazonのような画像ズーム機能が実装できる「SergeLand Image Zoomer」
「SergeLand Image Zoomer v3.0」はAmazonなどでみられるマウスオーバーで画像をズームしてくれる機能を実装できるjQueryプラグインです。 ダウンロード *黄色ボタン
-
-
selectボックスを華麗にしてくれる「Chosen」「Select2」
selectボックスに当てるjQueryプラグインを色々探してみましたがこれに決めました。シングルやマルチ、またグループにも対応しています。インスタンス検索してくれるのが決め手 Chosen CDN
-
-
表示パターン豊富なスライダー「flexslider 2」
「flexslider 2」は、シンプルに実装でき、かつカスタマイズ機能が豊富なスライダー用プラグインです。 flexslider 2 オプションや機能 サムネイルナビゲーション 複数表示
-
-
時刻入力に便利な「Timepicker for Bootstrap」(Bootstrap 2)
「Timepicker for Bootstrap」は、テキストボックスへの時刻入力を便利にしてくれるjQueryプラグインです。 目次 実装方法 モダール形式 Datepicker
-
-
select(list)ボックスを左右に並べて視覚的に使いやすくしてくれる「Multiselect」
「Multiselect」は、selectボックスを左右に配置して、選択したもの・していないものを左右に分けてくれる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