ネットショップでアイテム紹介に使える商品スライダーのソースを紹介します。CSSとjQueryを使用してあります。

シンプルかつ、モダンなインパクトのあるアイテムスライダーです。

カテゴリーごとにアイテムが横に飛び去っていくような効果があり、スピード感があります。
Apple(アップル)のサイトで使われているようなカッコいいスライダーが実現できそうですね。

サンプルページを作ってみました。(サンプルで紹介しているアイテムは実際にご購入できます。)

→ ネットショップに最適。目を引くクールな商品スライダー「Simple Multi-Item Slider 」サンプル

商品数の限られたネットショップのトップページや、注目アイテムの紹介などにも活用できそうです。


【使用方法】

まずは、こちらのHow to Create a Simple Multi-Item Sliderからソースを一式ダウンロードします。必要なjQueryプラグインやcssファイル、デモ用のソースなどがダウンロードできます。

<head>部分にcssファイルを指定します。modernizr.jsも設定してあります。

そして</body>の直前にJavascriptを記述して準備完了です。

最後に<body>に以下のようにmi-sliderのクラス名で記述すれば完成です。
※ul要素がカテゴリー、li要素が各アイテムになります。<nav>タグはカテゴリー別のメニューに対応しています。

以下にサンプルのソースを書いておきます。どうぞご参考まで。

アイデア次第ではネットショップ以外にも活用できそうですね。
参考サイト:Codrops / How to Create a Simple Multi-Item Slider
サンプルページに利用させて頂いたオンラインショップ:Dhuni Crystal(ドゥニクリスタル)

この記事と関連してると思われる記事: