jQuery 「slick」のレスポンシブ化ができません。

Question

前提・実現したいこと

Wordpressの自作テーマに、slickスライダーを入れています。
ちゃんと、動いているのですがどうしてもレスポンシブできません。

JSはあまり得意ではありません。コピペ程度しか
できません。
jsの記述に間違いがあるでしょうか？
宜しくお願い致します。

発生している問題・エラーメッセージ

エラーメッセージは特にありません。

該当のソースコード

footer.php に下記の記述をしています。↓↓

html

<div> <div class="slider-container"> <ul class="slider"> <li><img src="/wp-content/themes/sample_mari/images/intro_img_01.png" alt="Coffee" /></li> <li><img src="/wp-content/themes/sample_mari/images/intro_img_02.png" alt="Jam&amp;Spread" /></li> <li><img src="/wp-content/themes/sample_mari/images/intro_img_03.png" alt="Sauce" /></li> <li><img src="/wp-content/themes/sample_mari/images/intro_img_04.png" alt="Organic Soda" /></li> <li><img src="/wp-content/themes/sample_mari/images/intro_img_05.png" alt="Mineral Water" /></li> <li><img src="/wp-content/themes/sample_mari/images/intro_img_06.png" alt="Chocolate" /></li> <li><img src="/wp-content/themes/sample_mari/images/intro_img_07.png" alt="Chocolate" /></li> <li><img src="/wp-content/themes/sample_mari/images/intro_img_08.png" alt="Chocolate" /></li> <li><img src="/wp-content/themes/sample_mari/images/intro_img_09.png" alt="Chocolate" /></li> 　　　</ul> </div> </div>

CSS
ul.slider.slick-initialized.slick-slider.slick-dotted{
margin-bottom: 30px;
width: 1200px;
margin: 0 auto;
}

JS

<script> $(function(){ $('.slider').slick({ autoplay:true, autoplaySpeed:3000, // 切り替わりのスピード slidesToShow: 4,//通常 1024px以上の領域では4画像表示 slidesToScroll: 1, dots:true,// スライダー下部に表示される、ドット状のページネーション responsive: [{ breakpoint: 1024,settings: { //601px～1024pxでは3画像表示 slidesToShow: 3, slidesToScroll: 3, } }, { breakpoint: 600,settings: { //481px～600pxでは2画像表示 slidesToShow: 2, slidesToScroll: 2 } }, { breakpoint: 480,settings: {//480px以下では1画像表示 slidesToShow: 1, slidesToScroll: 1 } }] }); }); </script>

こんな様子です。

試したこと

### 補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[Lhankor_Mhy]

ご提示のコードで当方の環境で試してみましたが、レスポンシブ対応できているように見えましたので、問題が再現しません。環境の問題か、ここに書かれていないコードに問題があるのかもしれません。あるいは『どうしてもレスポンシブできません』とのことですが、具体的な現象が書かれていないため、私にとっては「レスポンシブできている」ように見えるのかもしれません。いずれにせよ、もう少し情報を追加してください。

[kei344]

質問文は編集できますので、質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

[Lhankor_Mhy]

『どうしてもレスポンシブできません』とは、具体的には「どうなると予想」していて「どのようになった」のか、ご提示いただけますか？

[marimari830]

コメント、誠にありがとうございます。 このslickスライダー部分だけ、レスポンシブが全く効きません。 JSの記述に間違いがないとしたら。。。。 メディアクエリを書いていないから？？でしょうか？ どうぞよろしくお願いたします。

[Lhankor_Mhy]

jsはどこに書いてあるのですか？ footer.phpですか？ あと、おそらくwordpressだと思うので、質問にタグをつけたほうがいいかもしれないですね。

[Lhankor_Mhy]

あ、質問に書いてありますね……　大変失礼しました。

[marimari830]

いつもありがとうございます。Wordpress自作テーマです。ＪＳはfooter.phpに書いております。

[Lhankor_Mhy]

slickのバージョンはいくつですか？ リリースノートを見たところ、responsive オプションは1.5.6からのようです。

Answer 1

コメントを下さったお二人の方、本当にありがとうございました。
再度、ＣＳＳを見直したところ　width: 1200px;を消すとちゃんとレスポンシブしました。

これからも、どうぞご指導お願いいたします。感謝です！