Javascript 光滑的滑块用数字替换点

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/34660680/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 16:42:49  来源:igfitidea点击:

Slick slider replace dots with numbers

javascriptcarouselslick.js

提问by Mills

I'm trying to replace Slick slider / carousel pagination with numbers instead of dots. I have the project setup in js fiddle and I have have a custom function that displays the current slide count of a total of 6. I currently just have '1' replacing the dots but I would like to have the numbers represent the total number of slides.

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

JS Fiddle Demo

JS小提琴演示

HTML

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

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
    } 
}]
});

回答by IanGabes

If i catch your meaning, Change this line:

如果我理解您的意思,请更改此行:

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

to this:

对此:

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

or

或者

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

depending on where you want your index to start.

取决于您希望索引从哪里开始。

Here is your updated fiddle: https://jsfiddle.net/rLLvvpcm/5/

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