slick 両サイドをボカしたい

Question

前提・実現したいこと

スライダープラグインslickを利用して4枚並びの両サイドをボカして表示をしたいと考えています。

下記コードで試しましたが
左から3枚目のみぼやけずに、左から2枚目もぼやけるようになってしまします。
（左から3枚目のみに[.slick-center]というクラスが自動付与されるためです。）
そのため、.slick-centerの直前の要素にクラスを付与できれば良いのですが、、、

該当のソースコード

<ul class="slider01">
    <li>画像</li>
    <li>画像</li>
    <li>画像</li>
    <li>画像</li>
    <li>画像</li>
</ul>

// slickスライダー
$(".slider01").slick({
    autoplay: true,
    autoplaySpeed: 2000,
    speed: 800,
    arrows: false,
    centerMode: true,
    slidesToShow: 2,
    centerPadding: '15%'
});

.slider01 .slick-slide:not(.slick-center) {
    -webkit-filter: opacity(30%);
    -moz-filter: opacity(30%);
    -o-filter: opacity(30%);
    -ms-filter: opacity(30%);
    filter: opacity(30%);
    transition: 0.2s linear;
}

試したこと

$(function () {
    const current = document.querySelector('.slick-center');
    current.previousElementSibling.classList.add('slick-before');
});

.slider01 .slick-slide.slick-before {
    -webkit-filter: opacity(100%);
    -moz-filter: opacity(100%);
    -o-filter: opacity(100%);
    -ms-filter: opacity(100%);
    filter: opacity(100%);
    transition: 0.2s linear;
}

.slick-centerの直前の要素に.slick-beforeが付与されるようにしました。
スライダーの表示直後はこれで、左から2枚の画像もぼやけずにうまくいっているのですが、
スライドが始まると、.slick-beforeの付与が最初の画像から動かずに固定されてしまい、
うまくいかず、困っております。

有識者の方がいらっしゃいましたら、ご教授いただけますと幸いです。

宜しくお願い致します。

Answer 1

イベントを拾ってはいかがでしょうか。

    $(".slider01").slick({
      autoplay: true,
      autoplaySpeed: 2000,
      speed: 800,
      arrows: false,
      centerMode: true,
      slidesToShow: 2,
      centerPadding: '15%',
    }).on('beforeChange', () => {
      $('.slick-slide').removeClass('slick-center_')
    }).on('afterChange', () => {
      $('.slick-center').prev().addBack().addClass('slick-center_');
    });

---

参考：
afterChange | slick - にほんご。

Comments

[kii.32]

ありがとうございます！
イベントを拾うという方法があるのですね！勉強になりました！
ご教授いただきました方法で、無事解決致しました。
感謝いたします。

Answer 2

新たにクラスを付与しなくともCSSのみで解決できる気がしますが、いかがですか。

$(".slider01").slick({
    autoplay: true,
    autoplaySpeed: 2000,
    speed: 800,
    arrows: false,
    slidesToShow: 4,
    infinite: true,
    slidesToScroll: 1
});

.slick-slide {
  opacity: 0.3;
  transition: 0.2s linear;
}
.slick-current + .slick-active,
.slick-current + .slick-active + .slick-active {
  opacity: 1;
}

Comments

[kii.32]

ありがとうございます！
ご提示いただきました方法で、両サイドのみぼかすことができました！

ただ、両サイドの2枚は半分だけ見えている状態にしたく、centerPadding: '15%',を入れていたのですが、
今度はこちらが反応しなくなってしまいました。

両サイドの2枚を半分だけ見えている状態にする方法はあるのでしょうか？