Vertical text jquery slider

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.
[upl-image-preview url=https://www.webdeveloper.com/assets/files/2020-01-16/1579170384-316441-capture.jpeg]

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

Also in #HTML _↴