Slick carousel. Want autoplay to play the slides o

2020-07-18 09:31发布

问题:

I am plugging Slick into a site. I have the home page
working with a slick slide show except for one thing I can not figure out.

I have 2 slides. They progress from a ghosted version of the image
fading in one by one to a full resolution of the image in all its
detail. At that point I want the last image to stop and stay there.

The mark up for the slider is:

<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 infinite: false would stop it. What actually happens is the
image fades in to full (slides 1-2) and then fades back out to ghosted
(slides 2-1) continuously.

The code to implement is:

$('.slide').slick({
    autoplay: true,
    autoplaySpeed: 1000,
    dots: false,
    infinite: false,
    speed: 1000,
    fade: true,
    slide: 'div',
    cssEase: 'linear'
});

Am I missing something, misunderstanding something or is this not
possible? Seems any autoplay should have a way to play once (or a
specific number of times)

回答1:

If you want the slider to stop when it reaches the last slide, you could use a custom method to determine on what slide number the slider is and work your way from there like bellow:

  • find the total items that you have in your slider (and decrease it by 1 since the slider counts its slides from 0 )
  • run a custom function after each slide is changed like:
  • check if the total items number is equal to the last slide number that the slider is currently on
  • if those numbers are equals, the pause the slider or use slicksetoption to overwrite the autoplay to false

Update

For slick above 1.4 vs:

From the author: In slick 1.4, callback methods have been deprecated and replaced with events

So basically it's the same idea, except 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)
  };
});

Check out the demo


For bellow slick 1.4

Note the js used:

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 here and hope it helps!



回答2:

For me (Slick 1.5.8) @Crispy-George solution doesn't work. I have to use 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 in docs: https://github.com/kenwheeler/slick (sections Events and Methods are most helpful in this problem)