slick

左右の画像を「透過」「小さく」

透過

CSS
                  
    /* 透過 */
    .slider.slider-type01 .slick-item img {
      height: auto;
      width: 100%;
      opacity: .4;
      transition: opacity .5s;
    }

    .slider.slider-type01 .slick-item.slick-center img {
      opacity: 1;
    }

小さく

CSS
                  
    /* 小さく */
    .slider.slider-type02 .slick-item img {
      height: auto;
      width: 100%;
      transform: scale(.8);
      transition: transform .5s;
    }

    .slider.slider-type02 .slick-item.slick-center img {
      transform: scale(1);
    }

透過　+　小さく

CSS
                  
    /* 透過　+　小さく */
    .slider.slider-type03 .slick-item img {
      height: auto;
      width: 100%;
      opacity: .4;
      transform: scale(.8);
      transition: opacity .5s, transform .5s;
    }

    .slider.slider-type03 .slick-item.slick-center img {
      opacity: 1;
      transform: scale(1);
    }

画像数によって２週目がガタつく

centerModeの2周目のガタツキ問題。slick.jsのバグです。

Githubでダウンロードしたslick.jsと、公式サイトが読み込んでいるslick.jsをﾃﾞｭﾌﾌってみると、ちょっと違うjsであることが判明。。。

公式サイトで使用している「slick.js」に差し換えると解消できる

参考サイト：https://sinpe-pgm.com/slick-bugfix/