Slick.js：获取当前和总幻灯片（即3/5）

使用Slick.js – 如何获得当前和总幻灯片（即3/5）作为点的简单替代？

我被告知我可以使用回调参数对象来使用customPaging回调，但这究竟是什么意思？

 $('.slideshow').slick({ slide: 'img', autoplay: true, dots: true, customPaging: function (slider, i) { return slider.slickCurrentSlide + '/' + (i + 1); } }); 

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

Answer 1

slider对象包含一个包含幻灯片计数的变量。

 $('.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; } }); 

DEMO

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

DEMO

Answer 2

这可能有所帮助：

• 您不需要启用点或customPaging。
• 使用CSS定位.slick-counter。

CSS

 .slick-counter{ position:absolute; top:5px; left:5px; background:yellow; padding:5px; opacity:0.8; border-radius:5px; } 

JavaScript的

 var $el = $('.slideshow'); $el.slick({ slide: 'img', autoplay: true, onInit: function(e){ $el.append('
'+ parseInt(e.currentSlide + 1, 10) +' / '+ e.slideCount +'
'); }, onAfterChange: function(e){ $el.find('.slick-counter').html(e.currentSlide + 1 +' / '+e.slideCount); } }); 

http://jsfiddle.net/cpdqhdwy/6/

Answer 3

我使用这个代码，它的工作原理：

.slider – 这是滑块

.count – 用于返回计数器的选择器

 $(".slider").on("init", function(event, slick){ $(".count").text(parseInt(slick.currentSlide + 1) + ' / ' + slick.slideCount); }); $(".slider").on("afterChange", function(event, slick, currentSlide){ $(".count").text(parseInt(slick.currentSlide + 1) + ' / ' + slick.slideCount); }); $(".page-article-item_image-slider").slick({ slidesToShow: 1, arrows: true }); 

Answer 4

基于@Mx发布的第一个命题。 （2014年9月15日发布）我创建了一个变体来获得ARIA支持的体面HTML标记。

 $('.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); var slideNumber = (i + 1), totalSlides = slider.slideCount; return '' + slideNumber + ''; } }); 

jsFiddle DEMO

Answer 5

您需要在初始化之前绑定init。

 $('.slider-for').on('init', function(event, slick){ $(this).append('
1 von '+slick.slideCount+'
'); }); $('.slider-for').slick({ slidesToShow: 1, slidesToScroll: 1, arrows: true, fade: true }); $('.slider-for') .on('afterChange', function(event, slick, currentSlide, nextSlide){ // finally let's do this after changing slides $('.slider-count #current').html(currentSlide+1); }); 

Answer 6

 Modifications are done to the new Slick version 1.7.1. 

这是一个更新的脚本示例： jsfiddle

Answer 7

使用前面的方法，一次超过1张幻灯片给了我错误的总数，所以我使用了“dotsClass”，就像这样（在v1.7.1上）：

// JS

 var slidesPerPage = 6 $(".slick").on("init", function(event, slick){ maxPages = Math.ceil(slick.slideCount/slidesPerPage); $(this).find('.slider-paging-number li').append('/ '+maxPages); }); $(".slick").slick({ slidesToShow: slidesPerPage, slidesToScroll: slidesPerPage, arrows: false, autoplay: true, dots: true, infinite: true, dotsClass: 'slider-paging-number' }); 

// CSS

 ul.slider-paging-number { list-style: none; li { display: none; &.slick-active { display: inline-block; } button { background: none; border: none; } } }