Slick.js: Get current and total slides (ie. 3/5)
The slider
object contains the slide count as property.
Slick < 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;
}
});
DEMO
Update for Slick 1.5+ (tested until 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
Update for 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
});
DEMO
Example when using 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
});
DEMO
You need to bind init before initialization.
$('.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);
});