スライドバナー Owl Carousel 2 のレスポンシブ挙動について

Question

いつもお世話になっております。

かなり前に田中さんに表題のスライダーを教えてもらって、PCページのみで使っていたのですが、この度スマホページでも使いたいと思いまして質問です。

2年以上前の質問だったので、詳細忘れてしまい、また教えてもらいたく思います。

GOLD内、slide/pcslider.htmlをスマホに流用したいのですが、
現在のHTMLを見ると、

=========
    responsiveClass:true,
    responsive:{
        0:{
            items:2
        },
        600:{
            items:3
        },
        900:{
            items:4
        }
=========

と表記があるので、このままレスポンシブで使えると思ったんですが、
いざスマホトップページに〜〜で加えると、
確かに2枚だけがスマホ幅で表示されるのですが、
次の画像も画面外に並んで表示されており、
横フリックでずらーっと見える状態です。

どこを直せば改善されるでしょうか？
ご教授よろしくお願い致します。

Accepted Answer

ECマスターズの田中です。

改めて確認を行ったところ、
lazyLoadを解除し、通常の画像読込に戻すと
表示が改善されるようですので、

slickのオプションから
lazyLoad:'progressive',
を削除し、
imgタグの data-lazy=" を全て src=" に修正した上で、
表示をご確認いただきますようお願いします。

その際、
body { width: 100vw; }
を
body { width: calc( 100vw - 16px ); }
に修正していただくことで、
左右の余白も丁度よい間隔になるようですので、お試しください。

> 今は、500px以下は画像1枚になるようにしたいのですが、
> PCのウィンドウ自体を縮小拡大したらそれに対応するのですが、
> デベロッパーツールで400pxとかを指定しても画像3枚のままです。
私にて、iPhone8の実機で確認したところ、
縦表示（横幅414px）で１枚、横表示（横幅736）で２枚表示となりましたので、
ご希望どおりの見た目になるのではないかと思います。
まずは、先述の変更をお試しいただき、
正しい見た目になった上で、実機にて画像枚数のご確認をお願いします。

Answer

ECマスターズの田中です。

pcslider.html の流用について、
改めてご案内いたしますので
今しばらくお待ちくださいますようお願いします。

Answer

ECマスターズの田中です。

大変お待たせいたしました。
改めてslide/pcslider.htmlの構造を確認したのですが、
問題なくレスポンシブな表示にできるように見えます。

iframeタグで、横幅の設定はされておりますでしょうか。
width属性を設定されていない場合は、タグに
width="100%"
をご設定いただき、改めて表示のご確認をお願いします。

それでも表示が乱れる場合は、
私にて実際の様子を確認させていただく必要がございますので、

アクセス数の少ない商品、
もしくはサーチ非表示に設定したダミーの商品ページの
スマートフォン用商品説明文にて
設置していただき、商品URLをお知らせいただきますようお願いします。

URLは、商品管理番号だけでも結構です。
フォーラムにてご返答いただきづらい場合は、
リクエストフォームよりお知らせください。

Answer

田中さん

ありがとうございます。

商品管理番号 test のスマホ説明文に入れてみました。
なぜか右端が少し見切れてしまっているのですが、画面外にスライドできてしまうという事態にはなっていません。
しかし、下に出るはずの丸いガイドボタン？が出ていないので、画面外にあるようになってしまっているような気がします。

というのも、スマホトップページだと全く同じ記述でも、画面外にスライドできてしまうのです。（添付ファイル）
このときに丸いガイドボタンが画面外にあるので、商品説明文に入れたときもそのようになっているのではないか、と思うわけです。

このスライドバナーはトップページで使いたいので、今のままでは…。
引き続き、よろしくお願い致します。###HR######IMG0cbdc375898784c7503b2c71544e9abab.pngIMG0######BR###

Answer

ECマスターズの星です。

休み明けに担当より回答させていただきますので、
恐れ入りますが今しばらくお待ちください。

Answer

ECマスターズの田中です。

お待たせいたしました。
テストページをご用意いただき、ありがとうございます。

テストページを確認させていただいたところ、
確かに、pcslider.htmlが見えないところで横に突き出ておりました。

Owl Carousel 2の仕組みとして、
タグの中で全てのスライドを表示しておき、
タグに指定された領域だけを見せる、
という方法を採っているのですが、
iOSのSafariでは、タグのサイズ指定にかかわらず
全ての内容が表示される仕様であるため、
スライドの中身が全て表示されております。

Owl Carousel 2の構造上の問題ですので、
下記「slick.js」など、別の仕組み（jQueryプラグイン）を利用して
スライドバナーを作り直していただき、
同様の現象が起こらないかお試しいただく必要がございます。
http://uzurea.net/explanation-of-jquery-slider-slick/

Answer

田中さん

お世話になっております。

slickで新しく作ろうと思います。
しかし何分スキルがないので教えて頂きたく…。

頂いたURLを参考に、ひとまず設定してみたのですが、、、動く気配なしです…。
こうかな？とHTMLとかいろいろ弄ったのですが動かず…。
教えてくださいm(_ _)m

作ったファイル→slick/slickslider.html です。

※slickオフィシャルサイトのget it now→downloadをと行くと404NotFoundでしたので、その下のVeiw on Githubから1.9.0というのをダウンロードし、GOLDにアップしています。

Answer

ECマスターズの田中です。

slickslider.htmlを確認したところ、
オプションが正しく指定されておりませんでした。

slick.jsでは、
$('スライダーバナーにする要素').slick({ と }); の間に
設定を記載したオプションを掲載する必要がありますが、
slickslider.htmlでは
$('スライダーバナーにする要素').slick();
と何も指定していない上に、
下の行にオプションがそのまま記載されており、文法上のエラーとなっております。

また、responsive: [ に対応する ] が無かったりと、
カッコ同士の対応が崩れておりますので、
正しい構造となるようにカッコを書いていただきますようお願いします。

具体的には、slickslider.htmlの
１２行目の .slick(); を .slick({ に修正、
３１行目の }, を }] に修正、
３１行目と３２行目の間に }); を追記、
といった形で修正をお願いします。

Answer

田中さん

ありがとうございます。
とりあえず、動くようにはなりました。

続いて教えて頂きたいのですが、

・画面幅を狭めると、スライド画像が重なってしまいます。また、幅が広すぎると余分な空白ができてしまいます。画面幅に合わせて画像サイズを自動調整する方法はありますか？

・スマホに入れると正常に反映されません。テストページ商品番号「test」に入れましたので確認いただき、対処方法を教えてください。

よろしくお願い致します。

Answer

ECマスターズの田中です。

> ・画面幅を狭めると、スライド画像が重なってしまいます。また、幅が広すぎると余分な空白ができてしまいます。画面幅に合わせて画像サイズを自動調整する方法はありますか？

仕組みを確認したところ、
各画像を囲むタグに対してサイズの自動調整が行われており、
囲まれたタグに適用されておりませんでした。

slickslider.htmlの中に
下記styleタグをご記載ください。

 .slick-slide img { width: 100%; } 

> ・スマホに入れると正常に反映されません。テストページ商品番号「test」に入れましたので確認いただき、対処方法を教えてください。

slickslider.html単体で見ると問題なく動作しておりましたので、
スマートフォンで動作しない、というわけではありませんでした。

testの商品ページを確認したところ、
未だにpcslider.htmlが含まれており、
商品説明文の欄の横幅を広げているようですので、
pcslider.html用のiframeタグを削除の上、
表示をご確認いただきますようお願いします。

Answer

田中さん

ありがとうございます。

＞slickslider.htmlの中に
＞下記styleタグをご記載ください。
＞ .slick-slide img { width: 100%; } 

こちらの件は無事希望通りの表示になりました。ありがとうございます。


＞testの商品ページを確認したところ、
＞未だにpcslider.htmlが含まれており、
＞商品説明文の欄の横幅を広げているようですので、
＞pcslider.html用のiframeタグを削除の上、
＞表示をご確認いただきますようお願いします。

こちら、pcslider.htmlを消しましたが改善されません…。
chrome上のデベロッパーツールで見るとできているようなのですが、（ただしheightがおかしい）
手元の実機iPhoneXで見ると表示されません。

引き続きご指導ください。よろしくお願い致します。

よろしくお願い致します。

Answer

ECマスターズの田中です。

正確な原因が特定できないので、
考えられる対策方法を一つずつお試しいただきますようお願いします。

最初に、前回ご記載いただいたとの間に、
body { width: 100vw; }
を追記していただき、表示をご確認ください。

Answer

田中さん

お世話になっています。
body入れましたが変わらずです。

それから、レスポンシブもうまく動いていないように思います。
今は、500px以下は画像1枚になるようにしたいのですが、
PCのウィンドウ自体を縮小拡大したらそれに対応するのですが、
デベロッパーツールで400pxとかを指定しても画像3枚のままです。

合わせてよろしくお願い致します。

Answer

田中さん

お世話になっています。

lazyloadを解除することできちんと表示されました！！ありがとうございます！

枚数表示についても、私の実機にて確認できました。お騒がせしました。

さらに追加で２つ質問なのですが、

１）
画像と画像の間に少し隙間がほしいです。どうすればいいでしょうか？

２）
画面を上下にフリックするときにこのスライダー部分を触ると、スライダーが止まってしまいます。
pauseOnHover: true, か pauseOnFoucus: false, が原因かなと思いtrue/false変えてみましたが違うようです。
止まらないようにするにはどうすればいいでしょうか？どうしようもないのでしょうか？

お手数おかけしますがよろしくお願い致します。

Answer

ECマスターズの田中です。

> lazyloadを解除することできちんと表示されました！！ありがとうございます！
無事表示されて何よりです。

> １）
画像の幅を、タグより少し狭めてみてください。
たとえば、
.slick-slide img { width: 100%; }
を
.slick-slide img { width: calc( 100% - 15px ); }
にご変更いただくような形です。

> ２）
pauseOnHover および pauseOnFocus は
いずれも初期値が true になっておりますので、
両方を同時に false にご設定いただきますようお願いします。

slick.js用オプションのうち、２）に関連ありそうなのは
この２項目のみですので、
ご設定いただいても改善されないようであれば、修正は難しいです。

Answer

田中さん

ありがとうございます。
希望通りの表示になりました！

２）については、
pauseOnHover pauseOnFocus どちらもfalseにしましたが改善されないので割り切ります。

細かいところまでいろいろと本当にありがとうございました。
あとはスライドしっかり準備して本番ページに入れ込みます。