- 文字サイズ変更
- 小
- 中
- 大
解決済
スライドバナー Owl Carousel 2 のレスポンシブ挙動について
- 相談者：非公開
- 2018/05/24 18:41
いつもお世話になっております。
かなり前に田中さんに表題のスライダーを教えてもらって、PCページのみで使っていたのですが、この度スマホページでも使いたいと思いまして質問です。
2年以上前の質問だったので、詳細忘れてしまい、また教えてもらいたく思います。
GOLD内、slide/pcslider.htmlをスマホに流用したいのですが、
現在のHTMLを見ると、
=========
responsiveClass:true,
responsive:{
0:{
items:2
},
600:{
items:3
},
900:{
items:4
}
=========
と表記があるので、このままレスポンシブで使えると思ったんですが、
いざスマホトップページに<iframe ="">〜〜で加えると、
確かに2枚だけがスマホ幅で表示されるのですが、
次の画像も画面外に並んで表示されており、
横フリックでずらーっと見える状態です。
どこを直せば改善されるでしょうか？
ご教授よろしくお願い致します。
かなり前に田中さんに表題のスライダーを教えてもらって、PCページのみで使っていたのですが、この度スマホページでも使いたいと思いまして質問です。
2年以上前の質問だったので、詳細忘れてしまい、また教えてもらいたく思います。
GOLD内、slide/pcslider.htmlをスマホに流用したいのですが、
現在のHTMLを見ると、
=========
responsiveClass:true,
responsive:{
0:{
items:2
},
600:{
items:3
},
900:{
items:4
}
=========
と表記があるので、このままレスポンシブで使えると思ったんですが、
いざスマホトップページに<iframe ="">〜〜で加えると、
確かに2枚だけがスマホ幅で表示されるのですが、
次の画像も画面外に並んで表示されており、
横フリックでずらーっと見える状態です。
どこを直せば改善されるでしょうか？
ご教授よろしくお願い致します。
キーワード：スライド
このフォーラムへの質問は終了しました
今気になってる疑問、
セミナーに参加すれば解決するかも！？
セミナーに参加すれば解決するかも！？
日本全国のネットショップ12,000社が参加！
ネットショップでお悩みがある方はまずはオンラインセミナーへGO！
ネットショップでお悩みがある方はまずはオンラインセミナーへGO！
広告０円で楽天の売上アップ続出！
ECマスターズチャンネルをチェック！
ECマスターズチャンネルをチェック！
総視聴回数15万回突破！
最新の対策事例やSALE対策など、売上にお困りの方はぜひご視聴ください！
最新の対策事例やSALE対策など、売上にお困りの方はぜひご視聴ください！
- 返信者：非公開
- 2018/05/25 16:14
ECマスターズの田中です。
pcslider.html の流用について、
改めてご案内いたしますので
今しばらくお待ちくださいますようお願いします。………（省略）………
pcslider.html の流用について、
改めてご案内いたしますので
今しばらくお待ちくださいますようお願いします。………（省略）………
- 返信者：非公開
- 2018/05/25 19:03
ECマスターズの田中です。
大変お待たせいたしました。
改めてslide/pcslider.htmlの構造を確認したのですが、
問題なくレスポンシブな………（省略）………
大変お待たせいたしました。
改めてslide/pcslider.htmlの構造を確認したのですが、
問題なくレスポンシブな………（省略）………
- 返信者：非公開（質問者）
- 2018/05/25 23:35
田中さん
ありがとうございます。
商品管理番号 test のスマホ説明文に入れてみました。
なぜか右端が少し見切れてしまっているのですが、画面外に………（省略）………
ありがとうございます。
商品管理番号 test のスマホ説明文に入れてみました。
なぜか右端が少し見切れてしまっているのですが、画面外に………（省略）………
- 返信者：非公開
- 2018/05/26 13:16
ECマスターズの星です。
休み明けに担当より回答させていただきますので、
恐れ入りますが今しばらくお待ちください。………（省略）………
休み明けに担当より回答させていただきますので、
恐れ入りますが今しばらくお待ちください。………（省略）………
- 返信者：非公開
- 2018/05/28 19:09
ECマスターズの田中です。
お待たせいたしました。
テストページをご用意いただき、ありがとうございます。
テストページを確認させていただいたところ………（省略）………
お待たせいたしました。
テストページをご用意いただき、ありがとうございます。
テストページを確認させていただいたところ………（省略）………
- 返信者：非公開（質問者）
- 2018/05/29 16:59
田中さん
お世話になっております。
slickで新しく作ろうと思います。
しかし何分スキルがないので教えて頂きたく…。
頂いたURLを参考に………（省略）………
お世話になっております。
slickで新しく作ろうと思います。
しかし何分スキルがないので教えて頂きたく…。
頂いたURLを参考に………（省略）………
- 返信者：非公開
- 2018/05/29 19:37
ECマスターズの田中です。
slickslider.htmlを確認したところ、
オプションが正しく指定されておりませんでした。
slick.jsで………（省略）………
slickslider.htmlを確認したところ、
オプションが正しく指定されておりませんでした。
slick.jsで………（省略）………
- 返信者：非公開（質問者）
- 2018/05/30 11:55
田中さん
ありがとうございます。
とりあえず、動くようにはなりました。
続いて教えて頂きたいのですが、
・画面幅を狭めると、スライド画像が重………（省略）………
ありがとうございます。
とりあえず、動くようにはなりました。
続いて教えて頂きたいのですが、
・画面幅を狭めると、スライド画像が重………（省略）………
- 返信者：非公開
- 2018/05/30 22:28
ECマスターズの田中です。
> ・画面幅を狭めると、スライド画像が重なってしまいます。また、幅が広すぎると余分な空白ができてしまいます。画面幅に合わせて画………（省略）………
> ・画面幅を狭めると、スライド画像が重なってしまいます。また、幅が広すぎると余分な空白ができてしまいます。画面幅に合わせて画………（省略）………
- 返信者：非公開（質問者）
- 2018/05/31 00:03
田中さん
ありがとうございます。
＞slickslider.htmlの中に
＞下記styleタグをご記載ください。
＞<style> .slic………（省略）………
ありがとうございます。
＞slickslider.htmlの中に
＞下記styleタグをご記載ください。
＞<style> .slic………（省略）………
- 返信者：非公開
- 2018/05/31 18:57
ECマスターズの田中です。
正確な原因が特定できないので、
考えられる対策方法を一つずつお試しいただきますようお願いします。
最初に、前回ご記載い………（省略）………
正確な原因が特定できないので、
考えられる対策方法を一つずつお試しいただきますようお願いします。
最初に、前回ご記載い………（省略）………
- 返信者：非公開（質問者）
- 2018/06/01 15:54
田中さん
お世話になっています。
body入れましたが変わらずです。
それから、レスポンシブもうまく動いていないように思います。
今は、500p………（省略）………
お世話になっています。
body入れましたが変わらずです。
それから、レスポンシブもうまく動いていないように思います。
今は、500p………（省略）………
- 返信者：非公開
- 2018/06/01 23:04
ECマスターズの田中です。
改めて確認を行ったところ、
lazyLoadを解除し、通常の画像読込に戻すと
表示が改善されるようですので、
sli………（省略）………
改めて確認を行ったところ、
lazyLoadを解除し、通常の画像読込に戻すと
表示が改善されるようですので、
sli………（省略）………
- 返信者：非公開（質問者）
- 2018/06/04 00:53
田中さん
お世話になっています。
lazyloadを解除することできちんと表示されました！！ありがとうございます！
枚数表示についても、私の実………（省略）………
お世話になっています。
lazyloadを解除することできちんと表示されました！！ありがとうございます！
枚数表示についても、私の実………（省略）………
- 返信者：非公開
- 2018/06/04 15:30
ECマスターズの田中です。
> lazyloadを解除することできちんと表示されました！！ありがとうございます！
無事表示されて何よりです。
> ………（省略）………
> lazyloadを解除することできちんと表示されました！！ありがとうございます！
無事表示されて何よりです。
> ………（省略）………
- 返信者：非公開（質問者）
- 2018/06/04 17:58
田中さん
ありがとうございます。
希望通りの表示になりました！
２）については、
pauseOnHover pauseOnFocus どちらもf………（省略）………
ありがとうございます。
希望通りの表示になりました！
２）については、
pauseOnHover pauseOnFocus どちらもf………（省略）………
このフォーラムへの質問は終了しました
質問を検索する