slick.js の centerMode で、スライド要素が少ない場合の表示を整えたい

Question

前提

slick.js の centerMode を利用して、
表示する要素が3つ slidesToShow: 3 のスライダーを作っています。
3つのうち、両サイド2つは表示透明度を下げて、.slick-center のクラスが付く、真ん中の要素のみ目立つよう設定しています。

< □ ■ □　> こんな感じ。

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

スライド要素が4つ以上登録されている場合は、正常に機能しますが
3つ以下（必要な要素はすべて表示されている状態）になると表示が崩れてしまいます。
具体的には、.slick-center クラスが付く要素が真ん中ではなく両端になってしまい、
ほか2つの要素は半透明になります。
また、prev, next のボタンが出す、autoplay も動きません。

■ □ ■ こんな感じ。

要素が全て表示されている状態になるので、スライドとしては動作しなくても問題ありません。
ただ、見た目がおかしいので、要素が3つ以下の場合は＝すべての透明度を100％にする。という挙動にしたいのですが、どうすれば良いでしょうか？

■ ■ ■ 　こんな感じ。

該当のソースコード

<div class="slider">
  <div><a href="#"><img src="#"></a></div>
  <div><a href="#"><img src="#"></a></div>
  <div><a href="#"><img src="#"></a></div>
  <!-- 3つ以下にすると表示が崩れる div><a href="#"><img src="#"></a></div -->	  	  
</div>

$(document).ready(function(){
	$('.slider').slick({
	  centerMode: true,
	  centerPadding: '10px',
	  slidesToShow: 3,
	  autoplay: true,
	  autoplaySpeed: 3000,
	});
});

.slick-slide:not(.slick-center) {
  opacity: .5;
}

試したこと

js に if 文書く？
さっぱり見当がつきません…

Answer 1

初めにsliderの要素数（①）を取得して
slickの初期化後に①がslidesToShowよりも大きい場合は、opacityを設定

slickでは様々なタイミングでイベントが取れるので、
スライドした直後のイベントでcssの付替えをすれば良さそうです。

GithubのREADME（https://github.com/kenwheeler/slick/）と以下参考にして下さい。

    .slick-no-current {
      opacity: .5;
    }

    $(document).ready(function () {
      var slideCount = $('.slider div').length;
      var slidesToShow = 3;

      $('.slider').slick({
        centerMode: true,
        centerPadding: '10px',
        slidesToShow: slidesToShow,
        autoplay: true,
        autoplaySpeed: 3000,
      });

      if (slideCount > slidesToShow) {
        $('.slick-slide:not(.slick-current)').addClass("slick-no-current");

        // スライド直後のイベント
        $('.slider').on('afterChange', function(slick, currentSlide) {
          $('.slick-current').removeClass("slick-no-current");
          $('.slick-slide:not(.slick-current)').addClass("slick-no-current");
        });
      }
    });

Comments

[gorimi]

早々のご回答と丁寧なご指導いただき、誠にありがとうございました。
当方メインがUIデザイナーのため、JavaScriptに手を加えることがサッパリで、
分かりやすい解説とサンプルソースまで記述いただき、大変助かりました。
初歩的なところなのかもしれませんが、これを機にイベントのタイミングで分岐するjsの書き方など勉強したいと思います。ありがとうございます。