Slick.js - different delays between slides
I am using Slick Slider to display some slides. I need to have different delays between slides.
This is what I have so far - it works for the first slide, but it gets stuck on the second slide. The error is not that helpful to me: "Uncaught TypeError: Unable to read property 'add' of null" - slick.min.js: 17.
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
});
}
Any ideas what is wrong?
source to share
In fact, you are creating a new SlickJS instance on afterChange
- this is probably not what you want. You just need to update the weak parameters after every shift change to change the autoplay speed.
SlickJS exposes a method calledslickSetOptions
that allows you to change settings along the way.
What you can do is drop the function entirely modifyDelay()
. Instead, when the event is afterChange
fired, you can use .slick('slickSetOptions', 'autoplaySpeed', <yourSpeed>', true)
to set a new autoplay speed:
$slideshow.on('afterChange', function(event, slick, currentSlide) {
$slideshow.slick('slickSetOption', 'autoplaySpeed', ImagePauses[currentSlide], true);
});
Note that the positional arguments for the slickSetOption
following are:
- Option name (refer to plugin settings / option / config for this )
- The value you want to assign - in this case, we simply retrieve the value from your array
ImagePauses
based on the index - A Boolean value that indicates whether to update the user interface . I don't think the UI gets updated when you just adjust the autoplay speed, so it
false
would be a safe bet, but I usedtrue
in my example to check your installation in the future.
Here's an example of proof I've added console.log()
so you know what values are set after each event afterChange
:
$(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 the modified fiddle which is now working :) http://jsfiddle.net/teddyrised/vxxhnga5/7/
source to share
Have a look at this working Fiddle http://jsfiddle.net/vxxhnga5/8/
I have a small change in your code
var $slideshow = $('.slider');
var ImagePauses = [6000, 2000, 3000, 10000, 4000];
// Init
modifyDelay(0);
// Sliding settings
$slideshow.on('change', function(event, slick, currentSlide) {
modifyDelay(currentSlide);
});
// Slider config
function modifyDelay(startSlide) {
$slideshow.slick({
initialSlide: startSlide,
autoplay: true,
fade: 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>
source to share