Smooth carousel. Want autoplay to play slides once and stop
I am connecting Slick to the site. I have a home page
working with a slippery slideshow, except for one thing I can't figure out.
I have 2 slides. They go from a ghostly version of the
fading image in one by one to full image resolution in all its
detail. At this point, I want the last image to stop and stay there.
Slider icon:
<div class="column-right slide">
<div><img src="img/servicios/road.jpg" alt="Road"/></div>
<div><img src="img/sobre_mi/map.jpg" alt="Map"/></div>
</div>
I figured out infinite: false will stop it. What actually happens is the image fades out to full (slides 1-2) and then fades out in ghost mode (slides 2-1) continuously.
Implementation code:
$('.slide').slick({
autoplay: true,
autoplaySpeed: 1000,
dots: false,
infinite: false,
speed: 1000,
fade: true,
slide: 'div',
cssEase: 'linear'
});
Am I missing something, am I misunderstanding something, or is this not possible? It seems like any autorun should have a way to play once (or a certain number of times)
source to share
If you want the slider to stop when it reaches the last slide, you can use a custom method to determine which slide number the slider is and how it works from there, as shown below:
- find the common elements you have on the slider (and decrease it by 1 as the slider counts slides from 0)
- run a custom function after changing each slide, e.g .:
- check if the common number is equal to the last slide number the slider is currently on.
- If these numbers are equal, pause the slider, or use slicksetoption to overwrite autoplay to false
Update
For a spot above 1.4 vs:
From the author : in slick 1.4 callback methods are deprecated and replaced with events
So, it's basically the same idea, except for a few minor changes:
var item_length = $('.slide > div').length - 1;
var slider = $('.slide').slick({
autoplay: true,
autoplaySpeed: 1000,
dots: false,
infinite: false,
speed: 1000,
fade: true,
slide: 'div',
cssEase: 'linear'
});
// On before slide change
slider.on('afterChange', function(event, slick, currentSlide, nextSlide){
//check the length of total items in .slide container
//if that number is the same with the number of the last slider
//Then pause the slider
if( item_length === slider.slick('slickCurrentSlide') ){
//this should do the same thing -> slider.slickPause();
slider.slickSetOption("autoplay",false,false)
};
});
Watch the demo
For more details 1.4
Note the use of js:
var item_length = $('.slide > div').length - 1;
var slider = $('.slide').slick({
autoplay: true,
autoplaySpeed: 1000,
dots: false,
infinite: false,
speed: 1000,
fade: true,
slide: 'div',
cssEase: 'linear',
onAfterChange: function(){
//check the length of total items in .slide container
//if that number is the same with the number of the last slide
//Then pause the slider
if( item_length == slider.slickCurrentSlide() ){
//this should do the same thing -> slider.slickPause();
slider.slickSetOption("autoplay",false,false)
};
}
});
Check out the demo and hope it helps!
source to share
For me (Slick 1.5.8) @ Crispy-George's solution doesn't work. I have to use the following code instead:
var slider = $('.slide').slick({
autoplay: true,
autoplaySpeed: 1000,
dots: false,
infinite: false,
speed: 1000,
fade: true,
slide: 'div',
cssEase: 'linear'
});
// Here is most important part of the code which actually stops the slider
slider.on('afterChange', function(event, slick, currentSlide){
// slick - is a slider object with a lot of useful info
// currentSlide - is a current slide index (starts from 0)
if( slick.slideCount === currentSlide + 1 ){
slick.paused = true;
}
});
More details in the docs: https://github.com/kenwheeler/slick (the Events and Methods sections are most helpful in this issue)
source to share