光滑的滑块用数字替换点

Question

我正在尝试用数字而不是点替换 Slick 滑块/轮播分页。我在 js fiddle 中设置了项目，我有一个自定义函数，显示当前幻灯片总数为 6。我目前只有“1”替换点，但我想让数字代表幻灯片总数。

HTML

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

<span class="pagingInfo"></span>

Javascript

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

Answer 1

如果我明白你的意思，请更改此行：

return '<a>1</a>';

对此：

return '<a>'+i+'</a>';

或

return '<a>'+(i+1)+'</a>';

取决于您希望索引从何处开始。

这是您更新后的 fiddle：https://jsfiddle.net/rLLvvpcm/5/

光滑的滑块用数字替换点

Slick slider replace dots with numbers

javascript

carousel

slick.js