Slickスライダを単語に変更する

Question

私のプロジェクトでは、滑らかなスライダのプラグインを使用しています（http://kenwheeler.github.io/slick/） 単語のデフォルトのドットを変更する必要があります。スライドは単語をクリックした後に変更する必要があります。ここで

Answer 1

が更新されたコードであると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>

に私の例をご確認ください