slick slider scale 효과를 줬는데 첫 창 열었을때 첫 이미지가 안먹히네요... 채택완료

그 다음부터는 열리는데 첫창 열었을때 첫번째 이미지가 먹히지 않습니다ㅜㅜㅜ 해결방법이 있을까요?

html

<div class="main_slider_wrap">

    <div class="main_slick_slider">

        <div>

            <a href="#">

                <div class="slick_img_box">

                    <img src="/web/img/mainscript/main_slide_1.jpg" alt="">

                </div>

            </a>

        </div>

        <div>

            <a href="#">

                <div class="slick_img_box">

                    <img src="https://via.placeholder.com/1920x960"/>

                </div>

            </a>

        </div>

        <div>

            <a href="#">

                <div class="slick_img_box">

                    <img src="https://via.placeholder.com/1920x960/19ce60/fff"/>

                </div>

            </a>

        </div>

    </div>

</div>

css

.main_slick_slider .slick-slide {

    position:relative;

    overflow:hidden;

}

.main_slick_slider .slick-slide .slick_img_box img {

    transform:scale(1.2);

    transition:transform 1.2s ease;

}

.main_slick_slider .slick-active .slick_img_box img {

    transform:scale(1);

    transition:transform 1.2s ease;

}

js

$('.main_slick_slider').on('init', function(event, slick) {

        $('.main_slick_slider').find('.slick-current').removeClass('slick-active').addClass('reset-animation');

        setTimeout( function() {

            $('.main_slick_slider').find('.slick-current').removeClass('reset-animation').addClass('slick-active');

        }, 1);

    });

    $('.main_slick_slider').slick({

        dots: true,

        infinite: true,

        speed:1200,

        fade: true,

        cssEase: 'linear',

        autoplay: true,

        prevArrow: false,

        nextArrow: false,

        pauseOnHover: false,

        pauseOnFocus: false,

    });