質問: スライドバナー owl carousel 2 のレスポンシブ挙動について いつもお世話になっております。かなり前に田中さんに表題のスライダーを教えてもらって、pcページのみで使っていたのですが、この度スマホページでも使いたいと思いまして質問です。2年以上前の質問だったので、詳細忘れてしまい、また教えてもらいたく思います。gold内、slide/pcslider.htmlをスマホに流用したいのですが、現在のhtmlを見ると、========= responsiveclass:true, responsive:{ 0:{ items:2 }, 600:{ items:3 }, 900:{ items:4 }=========と表記があるので、このままレスポンシブで使えると思ったんですが、いざスマホトップページに〜〜で加えると、確かに2枚だけがスマホ幅で表示されるのですが、次の画像も画面外に並んで表示されており、横フリックでずらーっと見える状態です。どこを直せば改善されるでしょうか?ご教授よろしくお願い致します。
回答: ecマスターズの田中です。slickslider.htmlを確認したところ、オプションが正しく指定されておりませんでした。slick.jsでは、$('スライダーバナーにする要素').slick({ と }); の間に設定を記載したオプションを掲載する必要がありますが、slickslider.htmlでは$('スライダーバナーにする要素').slick();と何も指定していない上に、下の行にオプションがそのまま記載されており、文法上のエラーとなっております。また、responsive: [ に対応する ] が無かったりと、カッコ同士の対応が崩れておりますので、正しい構造となるようにカッコを書いていただきますようお願いします。具体的には、slickslider.htmlの12行目の .slick(); を .slick({ に修正、31行目の }, を }] に修正、31行目と32行目の間に }); を追記、といった形で修正をお願いします。