如何在Slick.js中将点替换为数字到字母?

时间:2018-09-26 04:27:17

标签: javascript slick.js

下面是以前用数字替换点的代码。但是这次我想将数字替换为字母。您可以访问http://pegu2.onpressidium.com/上的演示网站以及“探索Pegu俱乐部”部分下的问题。

enter image description here

1 个答案:

答案 0 :(得分:0)

根据我对您问题的理解,请检查以下工作示例。

var letters = ['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];

$(".slider").slick({
    autoplay: false,
    dots: true,
    customPaging : function(slider, i) {
    var thumb = $(slider.$slides[i]).data();
    
    return '<a>'+letters[i]+'</a>';
            },
    responsive: [{ 
        breakpoint: 500,
        settings: {
            dots: false,
            arrows: false,
            infinite: false,
            slidesToShow: 2,
            slidesToScroll: 2
        } 
    }]
});
.slider {
    width: auto;
    margin: 30px 50px 50px;
}

.slick-slide {
    background: red;
    color: white;
    padding: 40px 0;
    font-size: 30px;
    font-family: "Arial", "Helvetica";
    text-align: center;
}

.slick-prev:before, 
.slick-next:before {
    color: black;    
}

.slick-dots {
    bottom: -30px;
}

.slick-slide:nth-child(odd) {
     background: gray;
}
<link href="https://rawgit.com/kenwheeler/slick/master/slick/slick-theme.css" rel="stylesheet"/>
<link href="https://rawgit.com/kenwheeler/slick/master/slick/slick.css" rel="stylesheet"/>
<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>

<section class="slider">
    <div>slide1</div>
    <div>slide2</div>
    <div>slide3</div>
    <div>slide4</div>
    <div>slide5</div>
    <div>slide6</div>
</section>