商品を横スクロールするのはjQueryやCSSによるSLIDER

slider

楽天の「今月の売れ筋ジャンルランキング」などの箇所にある、右矢印をポチっとやると、横に商品一覧がスクロールするあれ。Eストアーのトップページにも採用されています。

SLIDER(スライダー)と言います。

興味があって調べていて知りました。

試しに、ショップサーブ出店中の店につけてやろうと思ったんですが、これがまた難しいのなんの。何が難しいかって「カスタマイズ」。(ショップサーブが難しいわけではない。)

配布されているサンプルなどは、「写真を魅せる」的なものが多いので、「商品を魅せる」用に改造しないといけないわけです。具体的には、サムネイルを調整したり、商品ページへのリンクを貼るためにソースを解読したり。

で、結局すぐにあきらめたんですが、CSSのみを使ったSLIDERだけ試してみました。パソコンブラウザではきれいに使えたのですが、iPhoneで見るとぎこちない・・・という結果になり不採用。

jQueryを使う方法とCSSを使う方法がありますが、前者のほうが高機能でスムーズな印象です。ショップサーブのトップページなどに、jQueryを呼び出すJavascriptを挿入して、表示させたい箇所にCSS、HTMLのタグなどを挿入します。もちろん、表示させるための商品アイテムなどは何種類か用意しておく必要があります。

これができる人は確実に上級者ですね。

SLIDERをつけるthe most up-to-date netshopにしたいですね。
(up-to-date:最新の、※netshopは和製)


ABOUTこの記事をかいた人

ゆるい起業家。ECや飲食、コンサル、投資*などをいろいろやってます。座右の銘は「のらりくらり」。*マルチやネットワークではない。まっとうな投資。