CODEWITHSUNDEEP
javascriptarraysslidergalleryflickity
Sarah Lesh
Sarah Lesh

Reputation: 61

Flickity gallery - how to loop through once then stop autoplay

I am using Flickity gallery, and I want it to loop through once and then stop autoplaying. 3 is the final item in the gallery, so that's why I am trying to call it when the the gallery settles here.

Thanks in advance! Here is my code so far:

    var flkty = Flickity.data( $('.gallery')[0] )

    $(".gallery").on( 'settle', function() {
        if(flkty.selectedIndex === 3){
            $('.gallery').flickity({
              autoPlay: false,

            });

        }
    })

Upvotes: 1

Views: 1742

Answers (2)

Chris Anderson
Chris Anderson

Reputation: 93

Ran into this myself. Thanks for your solution, however i think later versions of flickity has updated the settle event. This is what worked for me

    var $carousel = $('. gallery').flickity({
        // options
        autoPlay: 3000,
        prevNextButtons: false,
        pageDots: false,
        wrapAround: true,
    dragThreshold: 10,
    });

  var flkty = Flickity.data( $('. gallery')[0] )

  $carousel.on( 'settle.flickity', function() {
      if(flkty.selectedIndex === 3){
         console.log("last!") 
         $carousel.flickity('stopPlayer');
      }
  })

Upvotes: 1

Sarah Lesh
Sarah Lesh

Reputation: 61

I figured out how do do this for anyone who is looking. Here is my code:

 var flkty = Flickity.data( $('.gallery')[0] )
  var $carousel = $('.gallery').flickity()

$(".gallery").on( 'settle', function() {
    if(flkty.selectedIndex === 3){
       console.log("last!") 
       $carousel.flickity('stopPlayer');
    }
})

Upvotes: 2

Related Questions