光滑的滑块用数字替换点

Mil*_*lls 4 javascript carousel slick.js

我试图用数字而不是点替换Slick滑块/轮播分页.我有js小提琴的项目设置,我有一个自定义功能,显示当前幻灯片计数总共6.我目前只有'1'替换点,但我想有数字代表总数幻灯片.

JS小提琴演示

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>
Run Code Online (Sandbox Code Playgroud)

使用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
    } 
}]
});
Run Code Online (Sandbox Code Playgroud)

Ian*_*bes 16

如果我抓住你的意思,改变这一行:

return '<a>1</a>';
Run Code Online (Sandbox Code Playgroud)

对此:

return '<a>'+i+'</a>';
Run Code Online (Sandbox Code Playgroud)

要么

return '<a>'+(i+1)+'</a>';
Run Code Online (Sandbox Code Playgroud)

取决于您希望索引的起始位置.

这是您更新的小提琴:https://jsfiddle.net/rLLvvpcm/5/

  • @Cray仅使用第二个选项,即“ i + 1” (2认同)