ECステーション様のスライドバナーの機能をスマホ用に流用したい

Question

お世話になります。
以前よりご紹介頂いておりますECマスターズクラブ会員専用ツールにある
ECステーション様のスライドバナーを試しています。

PCページ用であれば特に問題なく機能するかとは思うのですが
そのツールで生成出来たiframe用のHTMLファイルを流用して
スマホ用のスライドバナー等に使用したいと考えております。
そういう事は可能なのでしょうか。
（RMSのバグを突いて「商品ページ 共通パーツ設定」の「商品ページ共通説明文」に入れたいです）

自分で試してみたところ、iframeのwidthを100％にするのではなく
ピクセルを指定すればぱっと見では動いてる様にみえるのですが
iphoneではなくipadや他のアンドロイド端末でみた場合や
iphoneでも縦向きではなく横向きにした場合に画像が画面に入り切らなかったりと
そのまま流用するのは辛いのでなんとか出来ればと考えております。

尚、スライドバナーでの元画像は600×600ピクセルのものを



と言った感じの力技で一見大丈夫そうに誤魔化してます。
最終的にはスマホの画面に応じて画面幅100%で表示出来れば…と考えております。

また、スライドバナーをスマホで使うのであれば適正な画面サイズも教えて頂けますと幸いです
（現状は商品の1ヶ目の画像をリサイズ無しの600×600pxでそのままECステーションの素材に登録しています）

Answer

ECマスターズの田中です。

＞スマホの画面に応じて画面幅100%で表示出来れば…

ECステーションの「スライドバナー」にて、
「幅」の横にある「レスポンシブ」にチェックを入れていただきますと、
iframeのwidth、100%で利用することを前提として、
インラインフレームの横幅いっぱいに画像を表示するようになりますので、
ご希望の見た目になるのではないかと思います。

＞スライドバナーをスマホで使うのであれば適正な画面サイズも教えて頂けますと幸いです

画面サイズ、というのは、スライドバナーに使用する画像ファイルの高さおよび横幅、という意味でしょうか。
600pxであれば、楽天市場にてスマートフォン用大バナーの横幅として推奨している
616pxに近いので、お客様にて問題なく閲覧できると思います。

なお、5インチ以上の大型のスマートフォンに最適化する場合は、より大きくしていただく形になります。
下記質問への返信にて詳しくご説明しておりますので、ご参照ください。
https://ec-masters.club/forum/post_view.php?id=3152

Answer

ご回答ありがとうございました。
ですが、幅の横にあるレスポンシブにチェックを入れましたがレイアウトが崩れてしまいました
（画像が左寄せで表示されて右に余白が出来てしまう）

この場合、iframeをwidth100%にするのであれば
表示される画面サイズよりも素材の画像が大きくなるようにして
（画像の幅を一般的なスマホサイズのもの（何ピクセル？）よりも大きくして）
それをスライドショーの素材にすれば良いのか
レスポンシブを諦めて実際のサイズをiframeタグのwidthにピクセルで指定すれば良いのかどちらが良いのでしょうか？

Answer

ECマスターズの田中です。

＞幅の横にあるレスポンシブにチェックを入れましたがレイアウトが崩れてしまいました
＞（画像が左寄せで表示されて右に余白が出来てしまう）

その場合は、「スライドバナー」と同じフォルダに含まれる「jquery.bxslider.css」の末尾に

.bx-wrapper img { width: 100%; }

この規則を加えていただくことで、画像を横幅いっぱいに表示させることができますので
まずはお試しいただけますでしょうか。
（この方法の場合、スライドバナーの内容を更新する度に同じ作業が必要となります）

Answer

ご回答ありがとうございました。

ただ、これで対応すると
実装したページに遷移した段階では縦横画面サイズ関わらずWidth100%で表示出来るのですが
そのページを再読込をするとエンドレスに画像が大きくなってしまって画面がひどいことになります。
（PCページで見るとそんなことにはならないのですがスマホで見るとなってしまうようです）
なんとかならないでしょうか？

Answer

ECマスターズの田中です。

動作を確認したところ、
再読込を繰り返す度に大きくなったり、元のサイズに戻ったりするようです。

スライドバナーの仕組みの中で使われている
jQueryプラグインに関連する問題であるとは思うのですが、
どうしても解決を希望される場合は、

slick
http://kenwheeler.github.io/slick/

などの他のjQueryプラグインを導入して
別途スライドバナーを作成していただいた上で、
同じ現象が発生しないかどうか、お確かめいただくしかないと思います。

Answer

ご回答ありがとうございました。
元々は本来の使い方ではなかったので
PCページ用と割り切って利用するよう致します。

slickについてもご案内ありがとうございました。
レスポンシブに強いという事みたいでしたので
こちらで一度試してみたいと思います。
ありがとうございました。