質問: イーザッカマニアストアーズさんみたいなトップページを作りたい 身も蓋もない質問で申し訳ないのですがhttps://www.rakuten.ne.jp/gold/e-zakkamania/mobile/sp_html/index.html画面上部のアウター、トップスなどのカテゴリーがスライドバナーになってましてこちらを参考にしたいと思っております。弊社も商品のカテゴリーが非常に多くありましてどうしてもカテゴリーが多いとカテゴリーを並べていくバナーにすると(2×n行のバナーなど)バナー群が縦に長くなってしまう為人気のカテゴリーだけは上記urlのアウターなどのような感じのスライドバナーで表示出来ればと考えておりますが、自分の知識だけでは上手く出来ませんサンプルとなるコードを教えて頂けないでしょうか。あと、前にスライドバナーだけのページを作ってインラインフレームで呼び出そうとして作ったのですがレスポンシブデザインにしようとスマホページでインラインフレームをwidth=100%にすると無限に横に広がってしまってまともに表示出来なかった事がありました(pcページで呼び出した際はwidthをpixel指定しているので起きない)ホントはカテゴリーのスライドバナーもgoldページのトップページだけでなくrmsのカテゴリーや商品ページにもやれるようにしたいのですが(rms内のデザインだと文字数制限もあり、iframeで呼び出した方が都合が良いので)どのようにすれば良いでしょうか?
回答: ecマスターズの田中です。お知らせいただき、ありがとうございます。実際のページを確認した上で、私でも混同していた部分がございますので、スライドする仕組みについて、まずは一度ご確認いただきたい点がございます。イーザッカさんのトップページは、最初の返信にて申し上げた通りの仕組みなのですが、「横にスライドさせたいhtmlソース」自体には、slick.jsなどのスライドの仕組みは導入されておらず、単純に横長なコンテンツが設置されているだけとなっております。左右端に < および > のボタンがございますが、あくまでもスクロールができる旨を表現するためのもののようで、タップで内容をスクロールさせる、などの機能は持っておりません。443さんでも、いただいたindex_slider_test.htmlに= この下の行から ====================(中略)= この上の行まで ====================のように、私よりご案内差し上げたタグに、単純に画像を並べたタグをご設置いただくと、おわかりいただけるかと思います。このように、単純に横長なコンテンツが設置されているだけですので、自動スクロール・左右ボタンでスクロール、などの仕組みはございません。そのような仕組みを導入する場合は、私よりご案内差し上げたタグは使わずに、純粋にjqueryプラグイン(slick.js)で作成されたスライダー(recommend_sp.html)をiframeで、ページ幅100%でご設置いただいた上で、スライダーの見た目を調整してご対応いただく必要がございます。その場合、フリックによるスクロールができなくなる代わりに、左右ボタンをタップしてのスクロール、スライド単位でのスクロールができるようになります。443さん、pyonさん、それぞれ、どちらの形式での実装をご希望でしょうか。イーザッカさんと同じ仕組みをご希望でしたら、まずは、私よりご案内差し上げた、単純に画像を並べた形での設置をお試しください。