Как полностью повторить анимацию слайдера?

$(document).ready(function() { 
    
const info = $('.info__wrap');

  function showImage () {
    let elem = $('.info__item.slick-current').attr('data-img');
    let main = $('.main');
   main.css( "background-image", elem);
  }

info.on('afterChange beforeChange init reInit', function(event, slick, currentSlide, nextSlide) {
  showImage();
})

  info.slick({
    infinite: true,
    // speed: 600,
    slidesToShow: 1,
    // autoplay: true,
    //autoplaySpeed:5000,
    draggable: true,
    fade: false,
    arrows: false,
    dots: true,
    dotsClass: 'info__dots-list',
  }); 

});

.main {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
  transition: 0.3s background-image;
}

.main-header__inner {
  border-bottom: 1px solid rgba(210, 210, 211, 0.5);
  padding: 20px 0px;
  color: #fff;
}

.info__item {
  padding-top: 160px;
}

.info__subtitle {
  font-size: 90px;
  line-height: 1;
  color: #fff;
  text-align: center;
  margin-bottom: 20px;
  font-weight: 800;
}

.info__subtitle span {
  display: block;
  font-size: 36px;
  letter-spacing: 6px;
  text-transform: uppercase;
  padding-bottom: 12px;
  font-weight: 300;
}

.info__desc {
  text-align: center;
}

.info__desc p {
  font-size: 18px;
  line-height: 2;
  color: #fff;
  padding-bottom: 1.8em;
}

.info__dots-list {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 85px;
}

.info__dots-list li {
  cursor: pointer;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.info__dots-list li:not(:last-child) {
  margin-right: 15px;
}

.info__dots-list li button {
  cursor: pointer;
  font-size: 0px;
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  padding: 0px;
  border-radius: 50%;
  background-color: transparent;
}

.info__dots-list li.slick-active {
  width: 13px;
  height: 13px;
  background-color: #68bec1;
}

.container {
  opacity: 0;
 transform: translate(0, 100%);
  transition: .3s all .5s;
}

.slick-active .container  {
    opacity: 1;
 transform: translate(0, 0);
  
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<section class="main">
        <div class="main-header__inner">
            <div class="container">
                <div class="main-header__wrap">
                    block menu
                </div>
            </div>
        </div>
        <div class="info__wrap">
            <div class="info__item" data-img="url(https://bipbap.ru/wp-content/uploads/2017/04/priroda_kartinki_foto_03.jpg)">
                <div class="container">
                    <p class="info__subtitle"><span>Since 2001</span>lorem lorem title 1</p>
                    <div class="info__desc">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam magnam, possimus harum ipsam minima repellat iure modi, quidem alias pariatur, odio, consequuntur perspiciatis repellendus! Repudiandae perferendis ut fugit minus excepturi.</p>
                    </div>
                    <a href="" class="btn btn--info">more info</a>
                </div>
            </div>
            <div class="info__item" data-img="url(https://www.vseznaika.org/wp-content/uploads/2016/03/pic-00892.jpg)">
                <div class="container">
                    <p class="info__subtitle">title 2</p>
                    <div class="info__desc">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum soluta, nam tempora rem blanditiis iure qui dolorem, nobis commodi, consequatur obcaecati iusto aliquam provident hic autem quasi omnis sit laudantium!</p>
                    </div>
                    <a href="" class="btn btn--info">more info</a>
                </div>
            </div>
            <div class="info__item" data-img="url(https://bipbap.ru/wp-content/uploads/2017/04/priroda_kartinki_foto_03.jpg)">
                <div class="container">
                    <p class="info__subtitle">title 3</p>
                    <div class="info__desc">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et odio eaque, id cupiditate, distinctio illo autem delectus vero! Impedit officia, beatae tenetur omnis sint maiores vero iusto unde sunt culpa!</p>
                    </div>
                    <a href="" class="btn btn--info">more info</a>
                </div>
            </div>
        </div><!--end info__wrap-->
    </section>