CODEWITHSUNDEEP
jquery
vtj205
vtj205

Reputation: 285

Slick.js - Pause slideshow after it loops back to first slide

I'm using the slick.js slideshow library and I'm trying to basically pause the slideshow after it loops back to the first slide. I know I have to do something with the "slickCurrentSlide" and "slickPause" methods. But I can't seem to get it to work. Thanks!!!

    <div class="slideshow">
      <div><img src="img/bg1.jpg" alt="bg1" /></div>
      <div><img src="img/bg2.jpg" alt="bg2" /></div>
      <div><img src="img/bg3.jpg" alt="bg3" /></div>
      <div><img src="img/bg4.jpg" alt="bg4" /></div>
      <div><img src="img/bg5.jpg" alt="bg5" /></div>
    </div>


      var currentSlide = $('.slideshow').slick('slickCurrentSlide');

    $('.slideshow').on('beforeChange', function pauseSlideShow(event, slick, currentSlide, nextSlide){

      console.log("this is slide #" + currentSlide);

        setTimeout(function() {
          if (nextSlide === 0) {
            console.log("Yay!!! we're back to 1");
            $('.slideshow').slickPause(); 
          };
        }, 3000);

  });

Upvotes: 1

Views: 4720

Answers (2)

Blaine
Blaine

Reputation: 2331

This will pause the slideshow if the slide ends up back on the first slide, whether through autoplay, swiping or using prev/next controls.

Example: http://jsfiddle.net/55eow2ft/

var $slider = $(".slider").slick({
    autoplay: true
})
.on('afterChange', function( e, slick, currentSlide ) {
    if( currentSlide == 0 ) {
        $slider.slick('slickPause');
        console.log('paused');
    }
});

Upvotes: 3

James Hibbard
James Hibbard

Reputation: 17725

You can use Slick's onAfterChange callback.

$('.slider').slick({
  dots: true,
  autoplay: true,
  autoplaySpeed: 1000,
  infinite: true,
  speed: 500,
  slide: 'div',
  cssEase: 'linear',
  onAfterChange: function(slider){
    if(slider.currentSlide === 0){
      $('.slider').slickPause();
    };
  }
});

Here's a demo

Upvotes: 0

Related Questions