在光滑的js中在滑块上添加文本动画

Question

我使用了光滑来使用横幅滑块。 我试图在滑块上的滑动文本上做一些动画。 有谁可以帮我提供像fadeInRight / fadeInleft等动画。

CSS代码

  <style type="text/css">
    html, body {
      margin: 0;
      padding: 0;
    }

    * {
      box-sizing: border-box;
    }

    .slider {
        width: 100%;
        /*margin: 100px auto;*/ 
    }

    .slick-slide {
      position: relative;
    }

    .slick-slide img {
      width: 100%;
      height: auto;
    }

    .slick-prev:before,
    .slick-next:before {
        color: black;
    }

    .slick-next {
    right: 30px;
    z-index: 99999;
    }

    .slick-prev {
    left: 30px;
    z-index: 9999;
    }

    .slick-dots
    {
        bottom: 25px;
    }


    .banner-content-right
    {
        position: absolute;
        left:55%;
        top: 244px;
    }




  </style>

HTML CODE

  <section class="regular slider">
    <div>
      <img src="img/ghi.jpg">
        <div class="banner-content-right">
            <div class="banner-11 bannerFadeInRightBig">AAA</div>
            <div class="banner-12 bannerFadeInRightBig">ABC</div>
            <div class="banner-13 bannerFadeInRightBig">DEF</div>
            <div class="banner-14 bannerFadeInRightBig">GHI</div>
        </div>
    </div>
    <div>
      <img src="img/abc.jpg">
    </div>
    <div>
      <img src="img/def.jpg">
    </div>
  </section>

  <script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
  <script src="./slick/slick.js" type="text/javascript" charset="utf-8"></script>

JS CODE

    $(document).on('ready', function() {

      $(".regular").slick({
        dots: true,
        //autoplay: true
      });

    });
  </script>