カラーミーショップの商品詳細ページの商品画像をスワイプできると、お客様の利便性が向上します（特にスマホ閲覧時）。
商品画像をスワイプ（デモページ）

実装
商品画像表示部分をbxSlider（jQuery）に置き換えます。
サムネイルをクリックすると大画像の表示が変わります。
左右の矢印は画像で置き換え可能です。

注意点
元画像の幅が短いと余白ができてしまうため、商品画像は幅768px以上推奨（最低でも480px）。

ブラウザの幅によっては大画像の右端に細い筋が入ります（レスポンブ時）。
Chromeでよく発生するのはwidthを％で指定した際に小数点以下の端数の扱いが他ブラウザと異なるためです。

bxSliderのパラメータで mode:'fade' を追加すると筋は出なくなりますが、画像がフェードで切り替わるのでスワイプ感はなくなります。

執筆者

えいじ@naeco.jp　この記事を書いた人

メーカー系情報システム部門出身で、第一種情報処理技術者。
個人事業主／カラーミー歴10年目／カラーミーショップ公認パートナー。
カスタマイズやモールへの出店作業 (CSV) をお手伝いしています。

お仕事のご相談はこちら