• 文字サイズ
  • 小
  • 中
  • 大


解決済

スライドバナー 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枚だけがスマホ幅で表示されるのですが、
次の画像も画面外に並んで表示されており、
横フリックでずらーっと見える状態です。

どこを直せば改善されるでしょうか？
ご教授よろしくお願い致します。
キーワード：スライド
投稿内容について報告する
今気になってる疑問、
セミナーに参加すれば解決するかも！？
日本全国のネットショップ12,000社が参加！
ネットショップでお悩みがある方はまずはオンラインセミナーへGO！
セミナー詳細はこちら
広告０円で楽天の売上アップ続出！
ECマスターズチャンネルをチェック！
総視聴回数15万回突破！
最新の対策事例やSALE対策など、売上にお困りの方はぜひご視聴ください！
ご視聴はこちら

  • 返信者：非公開
  • 2018/05/25 16:14
ECマスターズの田中です。

pcslider.html の流用について、
改めてご案内いたしますので
今しばらくお待ちくださいますようお願いします。………（省略）………
続きを読む
  • 返信者：非公開
  • 2018/05/25 19:03
ECマスターズの田中です。

大変お待たせいたしました。
改めてslide/pcslider.htmlの構造を確認したのですが、
問題なくレスポンシブな………（省略）………
続きを読む
  • 返信者：非公開（質問者）
  • 2018/05/25 23:35
田中さん

ありがとうございます。

商品管理番号 test のスマホ説明文に入れてみました。
なぜか右端が少し見切れてしまっているのですが、画面外に………（省略）………
続きを読む
  • 返信者：非公開
  • 2018/05/26 13:16
ECマスターズの星です。

休み明けに担当より回答させていただきますので、
恐れ入りますが今しばらくお待ちください。………（省略）………
続きを読む
  • 返信者：非公開
  • 2018/05/28 19:09
ECマスターズの田中です。

お待たせいたしました。
テストページをご用意いただき、ありがとうございます。

テストページを確認させていただいたところ………（省略）………
続きを読む
  • 返信者：非公開（質問者）
  • 2018/05/29 16:59
田中さん

お世話になっております。

slickで新しく作ろうと思います。
しかし何分スキルがないので教えて頂きたく…。

頂いたURLを参考に………（省略）………
続きを読む
  • 返信者：非公開
  • 2018/05/29 19:37
ECマスターズの田中です。

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………（省略）………
続きを読む
  • 返信者：非公開
  • 2018/05/31 18:57
ECマスターズの田中です。

正確な原因が特定できないので、
考えられる対策方法を一つずつお試しいただきますようお願いします。

最初に、前回ご記載い………（省略）………
続きを読む
  • 返信者：非公開（質問者）
  • 2018/06/01 15:54
田中さん

お世話になっています。
body入れましたが変わらずです。

それから、レスポンシブもうまく動いていないように思います。
今は、500p………（省略）………
続きを読む
  • 返信者：非公開
  • 2018/06/01 23:04
ECマスターズの田中です。

改めて確認を行ったところ、
lazyLoadを解除し、通常の画像読込に戻すと
表示が改善されるようですので、

sli………（省略）………
続きを読む
  • 返信者：非公開（質問者）
  • 2018/06/04 00:53
田中さん

お世話になっています。

lazyloadを解除することできちんと表示されました！！ありがとうございます！

枚数表示についても、私の実………（省略）………
続きを読む
  • 返信者：非公開
  • 2018/06/04 15:30
ECマスターズの田中です。

> lazyloadを解除することできちんと表示されました！！ありがとうございます！
無事表示されて何よりです。

> ………（省略）………
続きを読む
  • 返信者：非公開（質問者）
  • 2018/06/04 17:58
田中さん

ありがとうございます。
希望通りの表示になりました！

２）については、
pauseOnHover pauseOnFocus どちらもf………（省略）………
続きを読む
このフォーラムへの質問は終了しました
質問を検索する
返信も検索対象にする

カテゴリーから探す