Javascript Slick.js：获取当前和总幻灯片（即 3/5）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25847297/
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
Slick.js: Get current and total slides (ie. 3/5)
提问by Mark Boulder
Using Slick.js- how does one get current and total slides (ie. 3/5) as a simpler alternative to the dots?
使用Slick.js- 如何获得当前和总幻灯片（即 3/5）作为点的更简单替代方法？
I've been told I can use the customPagingcallback using the callback argument objects, but what does that mean exactly?
有人告诉我，我可以使用customPaging回调参数对象来使用回调，但这究竟是什么意思？
$('.slideshow').slick({
slide: 'img',
autoplay: true,
dots: true,
customPaging: function (slider, i) {
return slider.slickCurrentSlide + '/' + (i + 1);
}
});
回答by Mx.
The sliderobject contains the slide count as property.
该slider对象包含幻灯片计数作为属性。
Slick < 1.5
光滑 < 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;
}
});
Update for Slick 1.5+ (tested until 1.8.1)
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
});
Update for Slick 1.9+
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
});
Example when using slidesToShow
使用时的示例 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
});
回答by Bharat Parmar
You need to bind init before initialization.
您需要在初始化之前绑定 init。
$('.slider-for').on('init', function(event, slick){
$(this).append('<div class="slider-count"><p><span id="current">1</span> von <span id="total">'+slick.slideCount+'</span></p></div>');
});
$('.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);
});
回答by Cvalya
I use this code and it works:
我使用此代码并且它有效：
.slider - this is slider block
.slider - 这是滑块
.count - selector which use for return counter
.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
});
回答by Joe L.
This might help:
这可能有帮助：
- You don't need to enable dots or customPaging.
- Position .slick-counter with CSS.
- 您不需要启用点或 customPaging。
- 使用 CSS 定位 .slick-counter。
CSS
CSS
.slick-counter{
position:absolute;
top:5px;
left:5px;
background:yellow;
padding:5px;
opacity:0.8;
border-radius:5px;
}
JavaScript
JavaScript
var $el = $('.slideshow');
$el.slick({
slide: 'img',
autoplay: true,
onInit: function(e){
$el.append('<div class="slick-counter">'+ parseInt(e.currentSlide + 1, 10) +' / '+ e.slideCount +'</div>');
},
onAfterChange: function(e){
$el.find('.slick-counter').html(e.currentSlide + 1 +' / '+e.slideCount);
}
});
回答by MartinDubeNet
Based on the first proposition posted by @Mx. (posted sept.15th 2014) I created a variant to get a decent HTML markup for ARIAsupport.
基于@Mx 发布的第一个命题。（2014 年 9 月 15 日发布）我创建了一个变体来获得一个体面的 HTML 标记来支持ARIA。
$('.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 '<a class="custom-dot" role="button" title="' + slideNumber + ' of ' + totalSlides + '"><span class="string">' + slideNumber + '</span></a>';
}
});
回答by drinkAcoffee
Using the previous method with more than 1 slide at time was giving me the wrong total so I've used the "dotsClass", like this (on v1.7.1):
使用以前的方法一次超过 1 张幻灯片给了我错误的总数，所以我使用了“dotsClass”，就像这样（在 v1.7.1 上）：
// JS
// 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
// CSS
ul.slider-paging-number {
list-style: none;
li {
display: none;
&.slick-active {
display: inline-block;
}
button {
background: none;
border: none;
}
}
}
回答by Vladimir Safonov
if you want page numbering:
如果你想要页码：
Example: 12 3 4...
示例：12 3 4...
HTML:
HTML：
<div class="slider">
<div>
<div>Some content</div>
<div class="slider-number"><span>1 2 3 4...</span></div>
</div>
<div>
<div>Some content</div>
<div class="slider-number"><span>1 2 3 4...</span></div>
</div>
...
...
</div>
JS:
JS：
$('.slider').on('init reInit afterChange',
function(event, slick, currentSlide){
var status = $(this).find('.slider-number span');
//currentSlide is undefined on init -- set it to 0 in this case (currentSlide is 0 based)
var i = slick.currentSlide;
var slidesLength = slick.slideCount;
var numberSlide1 = i + 1 <= slidesLength ? i + 1 : i - (slidesLength - 1);
var numberSlide2 = i + 2 <= slidesLength ? i + 2 : i - (slidesLength - 2);
var numberSlide3 = i + 3 <= slidesLength ? i + 3 : i - (slidesLength - 3);
var numberSlide4 = i + 4 <= slidesLength ? i + 4 : i - (slidesLength - 4);
status.html('<strong>'+numberSlide1+'</strong>' + ' ' +
numberSlide2 + ' ' +
numberSlide3 + ' ' +
numberSlide4 + '...');
});
