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

関連記事

画像ギャラリーを実装できる「Galleria」

Galleriaは、わずか数行で画像ギャラリーが作成できるjQueryプラグインです。Airbnbのページで使用されていて、コレいいな~と思い試してみました。 ナビゲーション内にサムネイルを

no image

定期的にAjaxリクエストを送信してくれる「PeriodicalUpdater」

PeriodicalUpdaterは、定期的にpostもしくはgetリクエストを送信してくれるjQueryプラグインです。Twitterのタイムラインのように定期的にツイートをロードしてくれるようなや

no image

バリデーション プラグイン

Nod Nod サイト | デモ [browser-shot url="http://rickharrison.github.io/validate.js/" width="2

ページ内のフォントサイズを変更してくれる「Text Resizer」

「jQuery Text Resizer Plugin」は、ページ内のフォントサイズを変更してくれるjQueryプラグインです。要素を限定してリサイズすることも可能です。jquery.cookie.j

no image

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

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

表示パターン豊富なスライダー「flexslider 2」

「flexslider 2」は、シンプルに実装でき、かつカスタマイズ機能が豊富なスライダー用プラグインです。 flexslider 2 オプションや機能 サムネイルナビゲーション 複数表示

select(list)ボックスを左右に並べて視覚的に使いやすくしてくれる「Multiselect」

「Multiselect」は、selectボックスを左右に配置して、選択したもの・していないものを左右に分けてくれるjQueryプラグインです。視覚的に使いやすくしてくれます。ダウンロードはこちら

no image

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

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

no image

ポップアップ・モーダル ウィンドウ プラグイン

ポップアップ シンプルにポップアップを実装できる「PopBox」 実装方法が選べるツールチップ用プラグイン「Smallipop」 Bootstrap Popovers

レスポンシブにも対応したカレンダーを表示する「Calendario.js」

Calendarioは、レスポンシブデザインにも対応したカレンダ表示プラグインです。 ダウンロード スクリプト 実装 $(document).ready

Comment

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

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

*

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

    PAGE TOP ↑