商品画像にスワイプ機能をつける方法

Topic summary

ユーザーがLouis Vuittonのサイトのような商品画像のスワイプ機能を、アプリではなくコード編集で実装する方法を質問しています。

フルバランスの渡邉氏から回答があり、以下の実装方法を提案:

  • Liquidを編集して商品の全画像を表示
  • jQueryのSlick Sliderを適用
  • 商品詳細ページのサムネイル部分のコードを参考にする

一覧画面で複数画像を表示することで、商品イメージが伝わりやすくなるメリットが指摘されています。

Slick Sliderの使い方に関する参考リンクも提供されていますが、この方法は未検証とのことです。

Summarized with AI on November 20. AI used: claude-sonnet-4-5-20250929.

リンクのような商品画像をスワイプさせて画像を切り替えられるように実装するにはどのような方法がありますか?アプリ以外でコード編集で実装したいです。https://jp.louisvuitton.com/jpn-jp/women/handbags/capucines/_/N-t8t2i4m

Yugeさま

はじめまして、フルバランスの渡邉です。

ご質問を確認いたしました。

一覧画面の状態で商品の複数画像が見れるとイメージが伝わりやすくて良いですね。

未検証ですが、liquidを編集して商品画像をすべて表示し、jQueryでSlick Sliderをあてるのはいかがでしょうか?

その商品に登録している画像を全て表示 → 商品詳細ページのサムネイル部分のコードを参考にできると思います

Slick slider使い方 → https://zero-plus.io/media/jquery-slick/

ご参考になりましたら幸いです。

私たちの励みにもなりますので、
お役に立てていればBest Answerボタンを押して頂ければ嬉しいです。

分からない点があれば、またいつでもご連絡ください。

フルバランス 渡邉