Проблема с слайдером на JS

есть проблема с слайдером.Скачал вот такой слайдер https://codyhouse.co/gem/animated-svg-image-slider. Взял вариант LINE 1.Я как то криво его установил на свой сайт что при прокрутке текст со 2 слайда появляется мгновенно и налазит на текст 1 слайда.И текст с 1 слайда остается до тех пор пока не выполнится анимация прокрутки.Не знаю как сделать что бы текст со 2 слайда появился тогда когда выполнится анимация прокрутки.Вот как я влепил текст в слайдер :

<div class="cd-slider-wrapper">
    <ul class="cd-slider" data-step1="M1402,800h-2V525V0h1c0.6,0,1,0.4,1,1V800z" data-step2="M1400,800H739L427,523L760,0h639c0.6,0,1,0.4,1,1V800z" data-step3="M1400,800H0V521V0h1399c0.6,0,1,0.4,1,1V800z" data-step4="M-2,800h2V525V0h-1c-0.6,0-1,0.4-1,1V800z" data-step5="M0,800h661l312-277L640,0L1,0C0.4,0,0,0.4,0,1L0,800z" data-step6="M0,800h1400V521V0L1,0C0.4,0,0,0.4,0,1L0,800z">
      <li class="visible">
        <div class="cd-svg-wrapper">
          <svg viewBox="0 0 1400 800">
            <defs>
              <clipPath id="cd-image-1">
                <path id="cd-changing-path-1" d="M1400,800H0V521V0h1399c0.6,0,1,0.4,1,1V800z"/>
              </clipPath>
            </defs>
            <image width="100%" clip-path="url(#cd-image-1)" xlink:href="img/gradient-black.jpg">
            <div class="slider-for-text "><div class="slider-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum possimus nihil voluptates repellat hic quisquam quasi sunt rerum, aliquam neque voluptatum in eius cupiditate alias non nulla quis, sit nostrum.</div></div>
            </image>
          </svg>
        </div> <!-- .cd-svg-wrapper -->
      </li>
      <li>
        <div class="cd-svg-wrapper">
          <svg viewBox="0 0 1400 800">
            <defs>
              <clipPath id="cd-image-2">
                <path id="cd-changing-path-2" d="M1400,800H0V521V0h1399c0.6,0,1,0.4,1,1V800z"/>
              </clipPath>
            </defs>
            <image width="100%" clip-path="url(#cd-image-2)" xlink:href="img/gradient-yellow.jpg">
            <div class="slider-for-text "><div class="slider-text "> voluptatum in eius cupiditate alias non nulla quis, sit nostrum.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum possimus nihil voluptates repellat hic quisquam quasi sunt rerum, aliquam neque</div></div></image>
          </svg>
        </div> <!-- .cd-svg-wrapper -->
      </li>
      <li>
        <div class="cd-svg-wrapper">
          <svg viewBox="0 0 1400 800">
            <title>Aimated SVG</title>
            <defs>
              <clipPath id="cd-image-3">
                <path id="cd-changing-path-3" d="M1400,800H0V521V0h1399c0.6,0,1,0.4,1,1V800z"/>
              </clipPath>
            </defs>
            <image  width="100%" clip-path="url(#cd-image-3)" href="img/gradient-purple.jpg"></image>
            <div class="slider-for-text ">.<div class="slider-text ">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum possimus nihil voluptates repellat hic quisquam quasi sunt rerum, aliquam neque voluptatum in eius cupiditate alias non nulla quis, sit nostrum.</div></div>
          </svg>
        </div> <!-- .cd-svg-wrapper -->
      </li>
      <li>
        <div class="cd-svg-wrapper">
          <svg viewBox="0 0 1400 800">
            <defs>
              <clipPath id="cd-image-4">
                <path id="cd-changing-path-4" d="M1400,800H0V521V0h1399c0.6,0,1,0.4,1,1V800z"/>
              </clipPath>
            </defs>
            <image  width="100%" clip-path="url(#cd-image-4)" xlink:href="img/gradient-blue.jpg"></image>
            <div class="slider-for-text ">.<div class="slider-text">squam quasi sunt rerum, aliquam neque voluptatum in eius cupiditate alias non nulla quis, sit nostrum.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum possimus nihil voluptates repellat hic quisquam quasi sunt rerum, aliquam neque</div></div>
          </svg>
        </div> <!-- .cd-svg-wrapper -->
      </li>
    </ul> <!-- .cd-slider -->
    <ul class="cd-slider-navigation">
      <li onclick="SubscribeFunction()"> <a href="#0" class="next-slide"><img src="img/next.ico" alt="next-ico"></a></li>
      <li><a href="#0" class="prev-slide"><img src="img/next.ico" alt="prev-ico"></a></li>
    </ul> <!-- .cd-slider-navigation -->
    <ol class="cd-slider-controls">
      <li class="selected"><a href="#0"><em>Item 1</em></a></li>
      <li><a href="#0"><em>Item 2</em></a></li>
      <li><a href="#0"><em>Item 3</em></a></li>
      <li><a href="#0"><em>Item 4</em></a></li>
    </ol> <!-- .cd-slider-controls -->
  </div> <!-- .cd-slider-wrapper -->

Вот CSS

.cd-slider-wrapper {
  position: relative;
 /*  right:2.9%;
 width: 102.9%; */
 width: 100% ;
 max-height: 400px;
 overflow-x: hidden;
 overflow-y: hidden !important;
}
.cd-slider > li {
  position: absolute;
  top: 0;
  left: -40px;
  width: 115%;
  opacity: 0;
  /* hide vertical scrollbar on IE11 */
  overflow: hidden;
}
.cd-slider > li.visible {
  position: relative;
  z-index: 2;
  opacity: 1;
}
.cd-slider > li.is-animating {
  z-index: 3;
  opacity: 1;
}
.cd-slider .cd-svg-wrapper {
  /* using padding Hack to fix bug on IE - svg height not properly calculated */
  height: 0;
  padding-bottom: 57.15%;
  color: black;;
}
.cd-slider-wrapper svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/* -------------------------------- 
Slider navigation
-------------------------------- */
.cd-slider-navigation li {
  position: absolute;
  z-index: 3;
  top: 50%;
  bottom: auto;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  right: 10px;
  height: 48px;
  width: 48px;
}
.cd-slider-navigation li a {
  display: block;
  height: 100%;
  overflow: hidden;
  white-space: nowrap;
  -webkit-transition: -webkit-transform 0.2s;
  -moz-transition: -moz-transform 0.2s;
  transition: transform 0.2s;
}
.next-slide>img{
  height: 70%;
}
.prev-slide>img{
  height: 70%;
  transform: rotate(180deg);
}
.no-touch .cd-slider-navigation li a:hover {
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
  transform: scale(1.1);
}
.cd-slider-navigation li:last-of-type {
  left: 10px;
  right: auto;
}
.cd-slider-navigation li:last-of-type a {
  background-position: -48px 0;
}
/* -------------------------------- 
Slider dots/controls 
-------------------------------- */
.cd-slider-controls {
  position: absolute;
  bottom: 20px;
  left: 50%;
  right: auto;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
  z-index: 3;
  text-align: center;
  width: 90%;
}
.cd-slider-controls::after {
  clear: both;
  display: table;
}
.cd-slider-controls li {
  display: inline-block;
  margin-right: 10px;
}
.cd-slider-controls li:last-of-type {
  margin-right: 0;
}
.cd-slider-controls li.selected a {
  background-color: #ffffff;
}
.cd-slider-controls a {
  display: block;
  /* image replacement */
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  color: transparent;
  height: 10px;
  width: 10px;
  border-radius: 50%;
  border: 2px solid #ffffff;
}
.no-touch .cd-slider-controls a:hover {
  background-color: #ffffff;
}
.slider-for-text{
  position: relative;
 height: 300px;
 width:70%;
 display: flex;
 margin:auto;
 padding-top:8%;
 align-items:center; 
}
.slider-text{
  font-size: 2vw;
  font-family: 'Comfortaa', cursive; 
  width: 90%;
  display: flex;
  height: 100%;
  float: left;
  align-items:center;
}

Сам джава скрипт можете посмотреть на сайте ссылку которого я скинул выше