商品画像をスワイプする

近年はスマートフォンからの閲覧が過半数を超えていて、スマートフォン対応が必須になっています。
商品詳細ページの商品画像をスワイプできるとお客様の利便性が向上しますので、昨今のネットショップではほとんどでついています。

カラーミーショップにも当然必要なスマートフォン対応だと考えられます。

デモページを用意しましたので、スマ―トフォンで閲覧して操作感などを参考にしてください。
商品画像をスワイプ（デモページ）

スワイプ機能の実装について

スワイプ機能は、一般的に普及しているjQueryプラグイン（slick、bxSliderなど）を使って実装します。
slick、bxSliderは、プラグインがカラーミーショップ上にすでにアップロードされていて、アップロード用のウェブサーバー（ファイルの置き場所）が不要な点も便利です。

実装する機能について

メイン画像（大画像）とサムネイル画像（大画像下の小画像）が連動して、サムネイル画像をクリックした際にメイン画像の表示が変わります。

サムネイル画像については、以下の二通りから選べます。
カラーミーショップの既存テンプレートではサムネイル画像をタイル状に並べるのがデフォルトです。

タイル状に並べる（サムネイル画像が多い場合に場所をとるので注意！）
一列横並びのカルーセルにする（省スペースで、スマートフォン閲覧時に向いています）

スワイプ時の画像切替アニメーションは二通りから選べます。
スライドを選択するとスワイプ感が出ますが、メイン画像（大画像）の左右両端に細い筋が出る不具合が発生します（後述）。

フェード
スライド

画像送りする左右の矢印は画像を置き換え可能です。置き換えのご要望があれば、好みの画像をご用意ください。

スライド選択時の注意点

メイン画像（大画像）の左右両端に細い筋が出ることがあります。
前後の画像の一部で背景色が近ければ目立ちません。
メイン画像（大画像）の横幅計算時の端数によって生じるものです。

フェードモードにすると筋は出なくなりますが、スワイプ感はなくなります。
スライドモードで筋が気になるようでしたら、フェードモードにすることも検討してください。

すこし難しい横幅計算時の端数の話

jQueryプラグイン内でCSSの transform: translate3d() を使う際に、メイン画像（大画像）をwidth xx%のような比率で指定していて、かつブラウザ幅に応じてメイン画像（大画像）のサイズが可変する場合に発生します。

サイドバーがあって、レスポンシブで作ってあるテンプレートは上の条件を満たすことが多いです。
条件を回避する場合はサイト全体に渡っての修正が必要で手間もかかりますので、既存テンプレートに機能追加する際には行いません。

どのブラウザでも、どのプラグインでも出るように思います。Chromeで特に発生します。
Chromeはwidthを％で指定した際に小数点以下の端数の扱いが他ブラウザと異なるためです。