Slick.js:获取当前和全部幻灯片(即3/5)

使用Slick.js-如何将当前幻灯片和总幻灯片(即3/5)作为点的简单替代方案

有人告诉我可以使用callback参数对象使用customPaging回调,但这到底意味着什么

$('.slideshow')。光滑({
幻灯片:“img”,
自动播放:对,
点:是的,
自定义分页:函数(滑块,i){
返回slider.slickCurrentSlide+'/'+(i+1);
}
});

http://jsfiddle.net/frank_o/cpdqhdwy/1/

滑块对象包含幻灯片计数作为属性

光滑<1.5

$('.slideshow')。光滑({
幻灯片:“img”,
自动播放:对,
点:是的,
dotsClass:“自定义分页”,
自定义分页:函数(滑块,i){
//仅供参考,只需查看对象即可找到可用信息
//在大多数浏览器中,按f12键可访问控制台
//您还可以调试或查看源代码
控制台日志(滑块);
返回(i+1)+'/'+slider.slideCount;
}
});

演示

更新Slick 1.5+(在1.8.1之前测试)

var$status=$('.pagininfo');
变量$slickElement=$('.slideshow');
$slickElement.on('init reInit afterChange',函数(事件、滑动、当前滑动、下一滑动){
//currentSlide在init上未定义——在这种情况下将其设置为0(currentSlide基于0)
变量i=(当前幻灯片?当前幻灯片:0)+1;
$status.text(i+'/'+slick.slideCount);
});
$slick.slick({
幻灯片:“img”,
自动播放:对,
圆点:对
});

演示

Slick 1.9的更新+

var$status=$('.pagininfo');
变量$slickElement=$('.slideshow');
$slickElement.on('init reInit afterChange',函数(事件、滑动、当前滑动、下一滑动){
//currentSlide在init上未定义——在这种情况下将其设置为0(currentSlide基于0)
变量i=(当前幻灯片?当前幻灯片:0)+1;
$status.text(i+'/'+slick.slideCount);
});
$slick.slick({
自动播放:对,
圆点:对
});

演示

使用slidesToShow

var$status=$('.pagininfo');
变量$slickElement=$('.slideshow');
$slickElement.on('init reInit afterChange',函数(事件、滑动、当前滑动、下一滑动){
//无点->无幻灯片
如果(!光滑。$点){
回来
}
//currentSlide在init上未定义——在这种情况下将其设置为0(currentSlide基于0)
变量i=(当前幻灯片?当前幻灯片:0)+1;
//使用点来获取一些计数信息
$status.text(i+'/'+(slick.$dots[0].children.length));
});
$slick.slick({
无限:错,
幻灯片放映:4,
自动播放:对,
圆点:对
});

演示

发表评论