How to replace dots to numbers to letters in Slick.js?

Question

Below is the code where the dots were replaced with numbers previously. But I wanted to replace the numbers to letters this time. You can check the demo website at http://pegu2.onpressidium.com/ and the issue under the section "Exploring The Pegu Club".

Answer 1

As per my understanding to your question , please check the following working example .

 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>