syopify 開発初心者です。
セクション：複数列 の画像を複数表示したいです。
画像のところがこんな感じになるのをイメージしてます。
“<” “>” を押下すると、2枚目の画像に移るイメージです。
お分かりになる方、ご教示願います。
よろしくお願いいたします。
Topic summary
Shopify開発初心者が、複数列で複数画像を表示し、「<」「>」ボタンで画像を切り替えるスライダー機能の実装方法を質問しています。
提案された解決策：
-
JavaScriptライブラリの使用
- 「Swiper」などのスライダーライブラリを使った実装方法が紹介されました
- HTML、CSS、JavaScript、Liquidコードの基礎知識が必要
- 実装が難しい場合は専門家への相談を推奨
-
外部アプリの利用
- 無料枠のある画像スライダーアプリが複数紹介されました
- 例：Image Slider Pro、POWR: Image Slider
- アプリストアで「Slider」や「Carousel」で検索可能
- アプリの仕様が希望に沿わない場合は、開発元に直接問い合わせることを推奨
技術的な実装とアプリ利用の両方の選択肢が提示され、スキルレベルに応じた解決方法が示されています。
Yuuuuuu070707様
ご質問を確認いたしました。
いただいているような機能ですが、Javascriptのスライダーライブラリを使用することで実装可能です。
スライダーライブラリはいくつかありますが、
比較的実装が容易な「swiper」での実装方法について記載のあるページURLを下記に添付いたします。
swiperの使い方：https://kiomiru.co.jp/blog/coding/swiper-js/
DAWNでのswiperスライダーの実装方法：https://note.com/oasiscreate/n/n2d942233be51
こちらの実装にはhtml,css,javascript,liquidコードの入門的な知識が必要になりますので、
ご自身での実装が難しい場合は、専門の方などにご相談されることを推奨いたします。
ご参考までに。
お役に立てたようでしたら、BAをいただけると嬉しいです。
よろしくお願いいたします。
株式会社フルバランス 園畑
Yuuuuuu070707様
画像スライダーをストアに設置できる・無料枠を設けている外部アプリがいくつかございましたのでよろしければお試しくださいませ。
- [Image Slider Pro - Upload images to create logo , carousal or banner sliders | Shopify App Store]
- [POWR: Image Slider | Carousel - POWR: Image Slider Carousel | Shopify App Store]
上記は一例となりますので、アプリストアからご希望に沿ったアプリをご選択ください。](Shopify App Store)からご希望に沿ったアプリをご選択ください。)アプリ検索では “Carousel” や “Slider” といったキーワードをご利用くださいませ。 外部アプリは弊社開発ではなく、各アプリ開発元が運営・管理をしておりますので使用方法やご希望の機能の有無に関するご質問は開発元側の方がより詳細を把握しております。是非直接ご質問していただくこともご検討くださいませ。
また、アプリの仕様がご希望に沿わない場合は、株式会社フルバランス 園畑様のおっしゃるようにコード編集をご検討いただき、必要に応じて専門家にご相談くださいませ。
よろしくお願い申し上げます。