使用 Slick.js - 如何获得当前幻灯片和总幻灯片(即 3/5)作为点的更简单替代方法?
有人告诉我可以使用回调参数对象来使用 customPaging
回调,但这到底是什么意思?
$('.slideshow').slick({
slide: 'img',
autoplay: true,
dots: true,
customPaging: function (slider, i) {
return slider.slickCurrentSlide + '/' + (i + 1);
}
});
最佳答案
slider
对象包含幻灯片计数作为属性。
光滑 < 1.5
$('.slideshow').slick({
slide: 'img',
autoplay: true,
dots: true,
dotsClass: 'custom_paging',
customPaging: function (slider, i) {
//FYI just have a look at the object to find available information
//press f12 to access the console in most browsers
//you could also debug or look in the source
console.log(slider);
return (i + 1) + '/' + slider.slideCount;
}
});
Slick 1.5+ 的更新(测试到 1.8.1)
var $status = $('.pagingInfo');
var $slickElement = $('.slideshow');
$slickElement.on('init reInit afterChange', function(event, slick, currentSlide, nextSlide){
//currentSlide is undefined on init -- set it to 0 in this case (currentSlide is 0 based)
var i = (currentSlide ? currentSlide : 0) + 1;
$status.text(i + '/' + slick.slideCount);
});
$slickElement.slick({
slide: 'img',
autoplay: true,
dots: true
});
Slick 1.9+ 更新
var $status = $('.pagingInfo');
var $slickElement = $('.slideshow');
$slickElement.on('init reInit afterChange', function(event, slick, currentSlide, nextSlide){
//currentSlide is undefined on init -- set it to 0 in this case (currentSlide is 0 based)
var i = (currentSlide ? currentSlide : 0) + 1;
$status.text(i + '/' + slick.slideCount);
});
$slickElement.slick({
autoplay: true,
dots: true
});
使用slidesToShow
时的例子
var $status = $('.pagingInfo');
var $slickElement = $('.slideshow');
$slickElement.on('init reInit afterChange', function (event, slick, currentSlide, nextSlide) {
// no dots -> no slides
if(!slick.$dots){
return;
}
//currentSlide is undefined on init -- set it to 0 in this case (currentSlide is 0 based)
var i = (currentSlide ? currentSlide : 0) + 1;
// use dots to get some count information
$status.text(i + '/' + (slick.$dots[0].children.length));
});
$slickElement.slick({
infinite: false,
slidesToShow: 4,
autoplay: true,
dots: true
});
关于javascript - Slick.js:获取当前和全部幻灯片(即 3/5),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25847297/