[slick.js]1周目の1枚目を操作したい場合のやつ

たまにある。

こうする
こういうときに

こうする

【slick.js】最初の1枚目だけ切り替わりが早い時の対処方法 - Qiita

普段はあまり気にならないのですが、自動で切り替わるスライダーを実装した時に最初の1枚目だけ切り替わるのが早く、コピーが読めない。2周目以降は切り替わる速さは問題ないといった場合の対処方法を説…

こういうときに

こんな感じでcssを組んだんですよ。

.slider{
    .slick-slide{
        picture{
            width: 100%;
            height: 100%;
            display: block;
            img{
                width: 100%;
                height: 100%;
                display: block;
                object-fit: cover;
                object-position: center;
                transform: scale(1);
                transition: transform 20s ease;
            }
        }
        &.slick-active{
            img{
                transform: scale(1.2);
            }
        }
    }
}

オプションはこう。

$('.slider').slick({
    dots: false,
    arrows: false,
    swipe: false,
    infinite: true,
    autoplay: true,
    fade: true,
    speed: 1200,
    autoplaySpeed: 10000,
});

表示してる間、設置してる画像がズームしていく感じにしたかった。
なので、active時に付与されるclassを活用してtransitionを入れ込んだ。

だけど、初回の1枚目はactive時の内容がすでに反映されちゃって、transitionが機能しない。

jsによる後付けのclassなのになんでcssが機能しないのか。
わからん上に弄ってるヒマがないので、初回の1枚目だけさっさと回してしまいたいというアレで思い立った。
autoplaySpeedがいじれたらいいので参考記事がそのまま使えた。

ラッキー。