slickスライダーのオプションを条件分岐

slickスライダーで条件分岐をする場合どのように記述したら良いのでしょうか。
もともとjs_1の内容をスマホとPCの時とでオプションを変えたいのですが可能でしょうか？
js_2のようなやり方で試したのですが動きません。。
js_1時点では問題ないです。

分岐したいオプション内容↓

spの時は
centerPadding:'9%',
pcの時は
centerPadding:'20%',

js_1

  $('#js-function-carousel').slick({
    dots: true,
    infinite: true,
    autoplay: true,
    centerMode: true,
    centerPadding:'20%',
    dotsClass: 'functions-carousel-dots',
    prevArrow: '<span class="functions-carousel-arrow -prev"></span>',
    nextArrow: '<span class="functions-carousel-arrow -next"></span>'
  });
});

js_2

	$(function(){
    function sliderSetting(){
 
        var width = $(window).width();
 
        if(width <= 750){
        $('#js-function-carousel').slick({
          dots: true,
　　　　　　infinite: true,
　　　　　　centerMode: true,
　　　　　　centerPadding:'9%',
          dotsClass: 'functions-carousel-dots',
          prevArrow: '<span class="functions-carousel-arrow -prev"></span>',
          nextArrow: '<span class="functions-carousel-arrow -next"></span>'
       });
        } else {
        $('#js-function-carousel').slick({
　　　　　　dots: true,
　　　　　　infinite: true,
　　　　　　centerMode: true,
　　　　　　centerPadding:'20%',
          dotsClass: 'functions-carousel-dots',
          prevArrow: '<span class="functions-carousel-arrow -prev"></span>',
          nextArrow: '<span class="functions-carousel-arrow -next"></span>'
       });
      }
    }
 
    sliderSetting();
 
    $(window).resize( function() {
        sliderSetting();
    });
   });

行動規範の内容に同意します

回答2件

breakpoint ではダメでしたか？
breakpoint | slick - にほんご。

投稿2020/05/28 05:48

Lhankor_Mhy

総合スコア36960

okama

2020/05/28 06:48

breakpointでできました！ありがとうございます！

行動規範の内容に同意します

ベストアンサー

こんにちは、以下のURLが参考になると思います。
https://github.com/kenwheeler/slick/#responsive-option-example
https://tr.you84815.space/slick/settings/responsive.html
試していませんが以下のように書けると思います。

Javascript
1$("#js-function-carousel").slick({
2    dots: true,
3    infinite: true,
4    autoplay: true,
5    centerMode: true,
6    centerPadding: "20%",
7    dotsClass: "functions-carousel-dots",
8    prevArrow: '<span class="functions-carousel-arrow -prev"></span>',
9    nextArrow: '<span class="functions-carousel-arrow -next"></span>',
10    responsive: [
11        {
12            breakpoint: 750,
13            settings: {
14                centerPadding: "9%",
15            },
16        },
17    ],
18});