[js] slickスライダー スライドにクラスを付与したい

Question

前提・実現したいこと

お世話になります。
５枚表示のslickスライダーで両端のスライドだけ透過したいと思っております。
左端は「slick-current」クラスで取得できるのですが
右端の取得の仕方がわからず、困っております。

該当のソースコード

  <div class="center">
    <div class="kage"><img src="https://www.jungleocean.com/demo/jquery-slick/images/1.jpg" alt=""><p>名前/テスト</p></div>
    <div class="kage"><img src="https://www.jungleocean.com/demo/jquery-slick/images/2.jpg" alt=""><p>名前/テスト</p></div>
    <div class="kage"><img src="https://www.jungleocean.com/demo/jquery-slick/images/3.jpg" alt=""><p>名前/テスト</p></div>
    <div class="kage"><img src="https://www.jungleocean.com/demo/jquery-slick/images/4.jpg" alt=""><p>名前/テスト</p></div>
    <div class="kage"><img src="https://www.jungleocean.com/demo/jquery-slick/images/5.jpg" alt=""><p>名前/テスト</p></div>
    <div class="kage"><img src="https://www.jungleocean.com/demo/jquery-slick/images/6.jpg" alt=""><p>名前/テスト</p></div>
    <div class="kage"><img src="https://www.jungleocean.com/demo/jquery-slick/images/7.jpg" alt=""><p>名前/テスト</p></div>
    <div class="kage"><img src="https://www.jungleocean.com/demo/jquery-slick/images/8.jpg" alt=""><p>名前/テスト</p></div>
  </div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<script src="slick.min.js"></script>
<script>
  $(function() {
 // 自要素の前を指定
 $('.slick-current').next().next().next().next().addClass("changed");
});
</script>
  <script>
     　$('.center').slick({
 　　arrows: true,
  slidesToShow:5,
  slidesToScroll: 1,
  dots: false,
centerMode: false,
      speed: 150,
 　});
  </script>

試したこと

  $(function() {
 $('.slick-current').next().next().next().next().addClass("changed");
});

これだと、スライダーが動いても付与される個所が変わらないので、困っております。

こちらのURLにテストの状況をアップしております。
http://mogelog.website/slick/
アドバイスいただけますと幸いです。
よろしくお願いいたします。

Answer 1

.slick-active が表示されているスライドには付くようです。

Comments

[KAZUHA]

ご回答いただきありがとうございます。
.slick-active　に透過をつけると
表示領域にある５枚ともが透過されてしまいました。
.slick-active:last-of-type を指定しても反映されないので、新規でclassを付与してあげないといけないのかもしれません。。。

[kei344]

:last-of-typeは兄弟要素の中の最後の要素（の種類）にしか反応しません。（クラスとかは考慮されません）

表示数が固定なら、CSSで処理してみては。
.slick-slide {
opacity: .5;
}
.slick-current,
.slick-current + .slick-active,
.slick-current + .slick-active + .slick-active {
opacity: 1;
}

[KAZUHA]

ありがとうございます、教えていただいたcssで思い通りの表現にすることができました。
逆に全体を半透明する発想が思いつきませんでした、大変助かりました。
ありがとうございました！