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

関連記事

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

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

開閉できるツリー構造を表現できる「jsTree」

「jsTree」は、Webサイト上にツリー構造を表示してくれるJQueryラグインです。実際、使うかというのは謎ですが、ブログ内に設置する機会があり使用してみましたので参考まで。 ダウンロードはこち

カルーセル プラグイン

「カルーセル(Carousel)」とは"回転木馬"という意味らしいのですが、jQuery(Javascript)では画像やコンテンツをスライド表示させるもののようです。が、スライダーとの違いはよく分り

no image

[続きを読む]でテキストを省略、開閉できる「jTruncate」「jTruncSubstr」

「jTruncate」は、長くなってスペースをとってしまう文章をなどであらかじめ指定した文字数で省略して表示してくれるjQueryプラグインです。 ダウンロードはこちら デモ スクリプト

カレンダー実装プラグイン「Bootstrap Calendar」

「Bootstrap Calendar」はBootstrap 3ベースでカレンダーが実装できるjQueryプラグインです。 ダウンロード スクリプト

入力されたメールアドレスのドメインをサジェストしてくれる「mailcheck.js」

「mailcheck.js」は、入力されたメールアドレスのドメインをサジェストしてくれるjQueryプラグインです。 ダウンロード スクリプト 実装 v

レスポンシブに対応した画像ギャラリーが実装できる「Responsive Image Gallery」

「Responsive Image Gallery with Thumbnail Carousel」はレスポンシブにも対応した画像ギャラリーが実装できるjQueryプラグインです。Twitterの「最

no image

シンプルにポップアップを実装できる「PopBox」

「PopBox」は、シンプルにポップアップを実装できるjQueryプラグインです。 スクリプト HTML Click Here!

レスポンシブに対応したテーブルを実装できる「FooTable」

「FooTable」は、画面の大きさに合わせて表示をかえてくれるテーブルを実装できるjQueryプラグインです。かなり、シンプルに実装できます。ダウンロード #v2にアップデートされたため刷

jqPlot - Legend(凡例) オプション

jqPlotの凡例(Legend)の設定オプションのまとめです。前提は、こちらを参照して下さい。 目次 凡例を表示 凡例の位置 [location, placement] 凡例のフォ

Comment

Shino | UDS Designer (@shino_uds) へ返信する コメントをキャンセル

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

*

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

    PAGE TOP ↑