<section class="slick_container">
    <div class="slick01">
        <div class="slick-slide slide01 add-animation">
            <img src="img/img4.jpg" alt="">
        </div>
        <div class="slick-slide slide02">
            <img src="img/img3.jpg" alt="">
        </div>
        <div class="slick-slide slide03">
            <img src="img/img2.jpg" alt="">
        </div>
    </div>
    <div class="result"></div>
</section>

.slick01 {
    width: 100%;
    overflow: hidden;
    .slick-slide {
        width: 100%;
        height: 500px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    button {
        position: absolute;
        top: 50%;
        z-index: 1;
        &.slick-prev {
            left: 0;
            display: inline-block;
            vertical-align: middle;
            color: #fff;
            line-height: 1;
            width: 1.5em;
            height: 1.5em;
            transform: translateX(25%) rotate(-135deg);
            &:before, &:after {
                content: '';
                position: absolute;
                background: currentColor;
                border-radius: 0.1em;
            }
            &:before {
                top: 0;
                left: 0;
                right: 0;
                height: 0.3em;
            }
            &:after {
                top: 0;
                right: 0;
                bottom: 0;
                width: 0.3em;
            }
        }
        &.slick-next {
            right: 0;
            display: inline-block;
            vertical-align: middle;
            color: #fff;
            line-height: 1;
            width: 1.5em;
            height: 1.5em;
            transform: translateX(-20%) rotate(45deg);
            &:before, &:after {
                content: '';
                position: absolute;
                background: currentColor;
                border-radius: 0.1em;
            }
            &:before {
                top: 0;
                left: 0;
                right: 0;
                height: 0.3em;
            }
            &:after {
                top: 0;
                right: 0;
                bottom: 0;
                width: 0.3em;
            }
        }
    }
}
.slick01 {
    .slick-slide {
        &.add-animation {
            animation: zoomIn 10s linear 0s normal both;
        }
    }
}

$(document).ready(function(){
  $('.slick01')
  .slick({
    autoplay:true,
    autoplaySpeed:2000,
    slidesToShow:1,
    arrows:true,
    fade:true,
    prevArrow: '<button class="slick-prev slick-arrow">', // 矢印のhtml要素を記述
    nextArrow: '<button class="slick-next slick-arrow">', // 矢印のhtml要素を記述
  })
  .on({
    // スライドが移動する前に発生するイベント
    beforeChange: function (event, slick, currentSlide, nextSlide) {
      $(".slick-slide", this).eq(nextSlide).addClass("add-animation");
      $(".slick-slide", this).eq(currentSlide).addClass("remove-animation");
    },
    // スライドが移動した後にクラスを付与
    afterChange: function () {
      $(".remove-animation", this).removeClass("remove-animation add-animation");
    }
  })
});