使用Slick.js -如何获得当前幻灯片和总幻灯片(即:3/5)作为点的更简单的替代方案?
有人告诉我可以通过回调参数对象使用customPaging
回调,但这到底是什么意思呢?
$('.slideshow').slick({
slide: 'img',
autoplay: true,
dots: true,
customPaging: function (slider, i) {
return slider.slickCurrentSlide + '/' + (i + 1);
}
});
发布于 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);
});
发布于 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
});
发布于 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;
}
}
}
https://stackoverflow.com/questions/25847297
复制相似问题