Vertical text jquery slider

Vertical text jquery slider
0

I am having a website made in Angular JS and I want to show a vertical text slider which moves the text vertically upward…
Here is the code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.7.1/slick.min.js"></script>
<div class="container">
  <div class="pagination" id="slick-wrapper">
    <div class="slick-item"><span class="pagination-item  |  animate">CRITIC</span></div>
    <div class="slick-item"><span class="pagination-item  |  animate">BUILDER</span></div>
    <div class="slick-item"><span class="pagination-item  |  animate">ENTWICKLER</span></div>
    <div class="slick-item"><span class="pagination-item  |  animate">SUPPORTER</span></div>
    <div class="slick-item"><span class="pagination-item  |  animate">COMMENTATOR</span></div>
  </div>
</div>
<script>
// Get titles from the DOM
var titleMain = $("#slick-wrapper");

if (titleMain.length) {
  titleMain.slick({
    autoplay: false,
    arrows: false,
    dots: false,
    slidesToShow: 3,
    centerPadding: "10px",
    draggable: false,
    infinite: true,
    pauseOnHover: false,
    swipe: false,
    touchMove: false,
    vertical: true,
    speed: 1000,
    autoplaySpeed: 2000,
    useTransform: true,
    cssEase: 'cubic-bezier(0.645, 0.045, 0.355, 1.000)',
    adaptiveHeight: true,
    arrows: true,
    prevArrow: '<i class="fa fa-chevron-circle-up" style="font-size:30px;color:#f79007"></i>',
    nextArrow: '<i class="fa fa-chevron-circle-down" style="font-size:30px;color:#f79007"></i>'
  });

  // On init
  $(".slick-item").each(function(index, el) {
    $("#animatedHeading").slick('slickAdd', "<div>" + el.innerHTML + "</div>");
  });

  // Manually refresh positioning of slick
  titleMain.slick('slickPlay');

};</script>
<style>/* $. Keyframes
\*----------------------------------------------------------------*/
@keyframes shrink {
  0% {
    color: #4B4B4B;
    transform: scale(2);
  }
  100% {
    transform: scale(1);
    color: grey;
  }
}

@keyframes grow {
  0% {
    transform: scale(1);
    color: grey;
  }
  100% {
    transform: scale(2);
    color: #4B4B4B;
    -webkit-filter: blur(0px);
    -moz-filter: blur(0px);
    -o-filter: blur(0px);
    -ms-filter: blur(0px);
    filter: blur(0px);
  }
}


/* $. Classes
\*----------------------------------------------------------------*/

.animate {
  transform: translate3d(0, 0, 0);
  perspective: 1000;
  -webkit-filter: blur(3px);
  -moz-filter: blur(3px);
  -o-filter: blur(3px);
  -ms-filter: blur(3px);
  filter: blur(3px);
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  transform-origin: center left;
}

.animate--shrink,
.pagination .slick-current>span {
  animation-duration: 1s;
  animation-name: shrink;
  animation-timing-function: "linear";
}

.animate--grow,
.no-js .pagination .slick-item:nth-child(2)>span,
.pagination .slick-current+.slick-slide>span {
  animation-duration: 1s;
  animation-timing-function: "linear";
  animation-name: grow;
}


/* Slider */

.slick-slider {
  position: relative;
  display: block;
  box-sizing: border-box;
  touch-callout: none;
  user-select: none;
  touch-action: pan-y;
  tap-highlight-color: transparent;
  padding-top: 40px;
}

.slick-list {
  position: relative;
  overflow: hidden;
  display: block;
  margin: 0;
  padding: 0;
}

.slick-list:focus {
  outline: none;
}

.slick-list.dragging {
  cursor: pointer;
  cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
  transform: translate3d(0, 0, 0);
}

.slick-track {
  position: relative;
  left: 0;
  top: 0;
  display: block;
}

.slick-track:before,
.slick-track:after {
  content: "";
  display: table;
}

.slick-track:after {
  clear: both;
}

.slick-loading .slick-track {
  visibility: hidden;
}

.slick-slide {
  float: left;
  height: 100%;
  min-height: 1px;
  display: none;
}

[dir=rtl] .slick-slide {
  float: right;
}

.slick-slide img {
  display: block;
}

.slick-slide.slick-loading img {
  display: none;
}

.slick-slide.dragging img {
  pointer-events: none;
}

.slick-initialized .slick-slide {
  display: block;
}

.slick-loading .slick-slide {
  visibility: hidden;
}

.slick-vertical .slick-slide {
  display: block;
  height: auto;
  border: 0;
  outline: none;
}

.slick-vertical .slick-slide:focus,
.slick-vertical .slick-slide:active,
.slick-vertical .slick-slide::selection {
  outline: none !important;
  border: 0 !important;
  box-shadow: none;
}

.slick-arrow.slick-hidden {
  display: none;
}

.slick-current {
  position: relative;
}

.pagination .slick-slide {
  overflow: hidden;
  padding: 20px 0;
}

.pagination [aria-hidden] {
  transition: 1s;
}

.pagination .slick-current>span {
  box-sizing: border-box;
  display: block;
}

.no-js .pagination .slick-item:nth-child(2)>span {
  padding: 1em;
}

.pagination-item {
  display: block;
  font-size: 24px;
  font-weight: bold;
  color: grey;
}
</style>

But is not working it is showing this error in console.
Capture

My code is similar to this page https://codepen.io/LinhNN/pen/VWEoqW