Slick.js - different delays between slides

Question

I'm using Slick Slider to display some slides. I need to be able to have different delays between the slides.

This is what I have so far - it works for the first slide, but it gets stuck on second slide. The error is not so useful for me: "Uncaught TypeError: Cannot read property 'add' of null" - slick.min.js:17.

The code:

var $slideshow = $('.slider');
var ImagePauses = [6000, 2000, 3000, 10000, 4000];

// Init
modifyDelay(0);

// Sliding settings
$slideshow.on('afterChange', function(event, slick, currentSlide) {
  modifyDelay(currentSlide);
});

// Slider config
function modifyDelay(startSlide) {
  $slideshow.slick({
    initialSlide: startSlide,
    autoplay: true,
    autoplaySpeed: ImagePauses[startSlide],
    fade: true
  });
}

jsFiddle here.

Any ideas what is wrong?

Answer 1

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>

You can also check out your modified fiddle that now works :) http://jsfiddle.net/teddyrised/vxxhnga5/7/