Slick.js:获取当前幻灯片和总幻灯片(即3/5)
Slick.js:获取当前幻灯片和总幻灯片(即3/5)
提问于 2014-09-15 19:43:03
使用Slick.js -如何获得当前幻灯片和总幻灯片(即：3/5)作为点的更简单的替代方案？
有人告诉我可以通过回调参数对象使用customPaging回调，但这到底是什么意思呢？
$('.slideshow').slick({
slide: 'img',
autoplay: true,
dots: true,
customPaging: function (slider, i) {
return slider.slickCurrentSlide + '/' + (i + 1);
}
});回答 5
Stack Overflow用户
发布于 2017-04-05 21:02:10
初始化前需要绑定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);
});Stack Overflow用户
发布于 2017-08-11 00:57:29
我使用下面的代码，它可以工作：
.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
});Stack Overflow用户
发布于 2017-09-22 20:29:34
使用前面的方法，一次超过一张幻灯片，给出了错误的总数，所以我使用了"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;
}
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/25847297
复制相关文章
相似问题