slider - 光滑的 slider 将点更改为单词

Question

在我的项目中，我使用了光滑的 slider 插件(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>