slickのレスポンシブ ＞ centerModeが効かない

はじめまして。よろしくお願いいたします。

slickで
メインバナーの左右に、メインの前と後ろのバナーを少しだけ表示させておくスライダーを表示させたいです。

いろいろなサイト様を参考にさせていただきまして、
jsで下記のように記述をし、ここまでは上手く反映されました。

$(document).ready(function(){
$('.slider').slick({
infinite: true,
dots:true,
centerMode: true,
autoplay:true,
});
});

なのですが、スマホのような小さな画面の際は、
『centerPadding:'0',にしたく、上の記述のあとに、


//レスポンシブ
responsive: [{
breakpoint: 768, //ブレイクポイント
settings: {
centerPadding:'50px',
},{
breakpoint: 576,
settings: {
centerMode: false,
}
}]

……のように追加記述をすると、
そもそものスライダーからも左右の余白が消え、
場合によっては、スライダーにもならないレイアウト崩れが起きます。

いろいろと自身でも調べているのですが、なかなか解決までたどりつけません。
詳しい方、どうかご教示願います。
宜しくお願いいたします。

No.1 ベストアンサー 回答者： sukitaro 回答日時： 2021/07/19 17:18

カッコの数が合っていないです。

centerPadding:'50px',
が、
centerPadding:'50px'}
なのではないかと思います。

この回答へのお礼

早々のご回答をありがとうございます！

無事に直りました！—–｡ﾟ(ﾟ´Д｀ﾟ)ﾟ｡—–
お恥ずかしながら、ここに2日くらい掛けていたので、本当に本当に感謝です…！

この度は本当にありがとうございました！

お礼日時：2021/07/20 02:43