Slick slider change dots to words - slider

Question

In my project I'm using slick slider plugin ( http://kenwheeler.github.io/slick/)
I need change default dots nav for words. Slides should be changed after clicking on the words.

Answer 1

Here is the Updated Code and check my example in CODEPEN
$(".slider").slick({
autoplay: true,
dots: true,
customPaging : function(slider, i) {
var thumb = $(slider.$slides[i]).data();
return '<a class="dot">'+i+'</a>';
},
responsive: [{
breakpoint: 500,
settings: {
dots: false,
arrows: false,
infinite: false,
slidesToShow: 2,
slidesToScroll: 2
}
}]
});
.frst{
background: #3a8999;
}
.scnd{
background: #e84a69;
}
.thrd{
background: #980505;
}
.frth{
background: #094602;
}
.slider {
width: auto;
margin: 30px 50px 50px;
}
.slick-slide {
color: white;
padding: 40px 0;
font-size: 30px;
font-family: "Arial", "Helvetica";
text-align: center;
}
.slick-prev:before,
.slick-next:before {
color: black !important;
}
.slick-dots {
bottom: -30px;
}
a.dot{
padding:10px 10px;
}
a.dot:hover{
background:#ddd;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/kenwheeler/slick/master/slick/slick.js"></script>
<link href="https://rawgit.com/kenwheeler/slick/master/slick/slick.css" rel="stylesheet"/>
<link href="https://rawgit.com/kenwheeler/slick/master/slick/slick-theme.css" rel="stylesheet"/>
<section class="slider">
<div class="frst">slide1</div>
<div class="scnd">slide2</div>
<div class="thrd">slide3</div>
<div class="frth">slide4</div>
<div class="frst">slide5</div>
<div class="thrd">slide6</div>
</section>
<span class="pagingInfo"></span>