商品画像をスワイプする

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

商品画像をスワイプできるようにする

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

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

ブラウザの幅によっては大画像の右端に細い筋が入ります(レスポンブ時)。
Chromeでよく発生するのはwidthを%で指定した際に小数点以下の端数の扱いが他ブラウザと異なるためです。
端数の出ない幅固定にして使うと良いみたいです(大外の枠をwidth:100%にせずに、width:???pxという風に)。スライダーの端に筋あり

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

制作物用のお問い合わせボタン

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

機能実装のお手伝いをしています。お気軽にご相談ください。
追加の要望や設置場所の状態によって、お見積り金額は変動します。

ご相談・お問い合わせはこちら

関連記事