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>
  • このエントリーをはてなブックマークに追加

関連記事

ページの画像を非同期で読み込んでくれる「Lazy Load」

「LazyLoad Plugin」は、画像をページのロード時ではなく非同期に読み込んでくれるjQueryプラグインです。設定によりスクロールした際に画像をロードしたりしてくれます。 ダウンロード |

シンプルにモーダルウィンドウを実装できる「leanModal」

「leanModal」は、シンプルにモーダルウィンドウを設置できるjQueryプラグインです。オプションは少なめですが、複雑な機能は必要なく単に設置したいという場合にはもってこいのライブラリだと思いま

テキストボックスの入力値を数値限定にしてくれる「jQuery - numeric」

「jQuery - numeric」は、テキストボックスへの入力を数字のみに制限してくれるjQueryプラグインです。正/負、整数/小数点 チェックまで限定してくれます。ダウンロード スクリプト

Bootstrap Modal + 拡張機能が実装できるプラグイン(Bootstrap 2)

Twitter Bootstrap Modalは、標準のモーダルウィンドウに様々な機能を追加することができます。 Twitter Bootstrap純正スクリプト ダウンロード / サイト

Bootstrap Modal + 拡張機能が実装できるプラグイン

Twitter Bootstrap Modalは、標準のモーダルウィンドウに様々な機能を追加することができます。 2014/06/16 Bootstrap3対応版に書き換えをしました。

no image

シンプルな画像スライダー/ギャラリー用プラグイン

スライダーやギャラリーを実装できるjQueryプラグインのうちシンプルなものを集めてみました。ベースはシンプルですが、オプションなどを使用してカスタマイズが豊富なものもたくさんありますね。 シン

クレジットカード番号のバリデーションとカード会社を特定してくれる「jQuery Credit Card Validator」

「jQuery Credit Card Validator」は、クレジットカード番号のバリデーションを行ってくれるjQueryプラグインです。入力したカード番号の検証とそれに基づいてカード会社の表示を

親要素の大きさに合わせて画像をリサイズ「imgLiquid」

「imgLiquid」は親要素の大きさに合わせて画像を縮小・切り取りを行ってくれるjQueryプラグインです。 ダウンロードはこちら スクリプト 実装

no image

数値入力に便利なステッパーを実装「Numeric Stepper」

「Numeric Stepper」は、数値用のステッパーを実装できるjQueryプラグインです。ダウンロード | デモ スクリプト 実装 既存のテキストボックスにclas

数値入力スライダー「jQuery Simple Slider」

「jQuery Simple Slider」はスライダーを使用して数値設定が行えるようにしてくれるjQueryプラグインです。"Unobtrusive Numerical Slider"とあるように余

Comment

@wJSnews へ返信する コメントをキャンセル

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

    PAGE TOP ↑