Slick.Js: Get Current and Total Slides (Ie. 3/5)

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

Slick.js count number by page

how about just recalculate it ?

var perPage = 3;
var total = slick.$dots[0].children.length;
var i = currentSlide > 0 ? currentSlide/perPage : 0;
$status.text(i + ' / ' + total);

Slick.js - different delays between slides

You are actually creating a new SlickJS instance upon afterChange--that is probably not what you want. What you need is simply to update the slick options after every slide change so that the autoplay speed is changed.

SlickJS exposes a method called slickSetOptions that allows you to modify settings on the go.

What you can do is to discard the modifyDelay() function entirely. Instead, when the afterChange event is fired, you can use .slick('slickSetOptions', 'autoplaySpeed', <yourSpeed>', true) to set the new autoplay speed:

$slideshow.on('afterChange', function(event, slick, currentSlide) {
    $slideshow.slick('slickSetOption', 'autoplaySpeed', ImagePauses[currentSlide], true);
});

Note that the positional arguments for slickSetOption are as follow:

1. The option name (for that, refer to available settings/option/config of the plugin)
2. The value that you want to assign--in this case, we are simply extracting the value from your ImagePauses array based on index
3. Boolean to indicate if the UI needs to be refreshed. I don't think the UI is refreshed when you are simply adjusting the autoplay speed, so false will be a safe bet, but I used true in my example to future-proof your setup.

Here is a proof-of-concept example, I have added console.log() so that you know what values are set after each afterChange event is fired:

$(function() {  var $slideshow = $('.slider');  var ImagePauses = [6000, 2000, 3000, 10000, 4000];
  // Init  $slideshow.slick({    initialSlide: 0,    autoplay: true,    autoplaySpeed: ImagePauses[0],    dots: false,    fade: true  });
  // Sliding settings  $slideshow.on('afterChange', function(event, slick, currentSlide) {    // Console log, can be removed    console.log('Current slide: ' + currentSlide + '. Setting speed to: ' + ImagePauses[currentSlide]);
    // Update autoplay speed according to slide index    $slideshow.slick('slickSetOption', 'autoplaySpeed', ImagePauses[currentSlide], true);  });
});

.panel {  border: 10px solid #333;  background: #ccc;  height: 200px;  margin: 10px;  font-size: 72px;  text-align: center;  line-height: 200px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><link href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css" rel="stylesheet" /><script src="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script><div class="slider">  <div class="panel">1</div>  <div class="panel">2</div>  <div class="panel">3</div>  <div class="panel">4</div>  <div class="panel">5</div></div>

$('.single-item').slick({
   setting-name: setting-value
});

$(".single-item").slick();