Document autoPlay player API

[brandondurham]

Experimenting with using Flickity in such a way that requires I be able to start/stop the carousel when mousing in/out of the parent element. Wondering, does the api have methods for start/stop yet?

[desandro]

Hello! Thanks for pinging about this. If by "start/stop" you mean controlling how autoPlay works, then Yes! There is an API for the Flickity Player class. Unfortunately, I haven't documented it yet.

flkty.player.play()
// starts autoPlay

flkty.player.stop()
// stops autoPlay
// stop kills pauses so they cannot be unpaused

flkty.player.pause()
// pauses autoPlay

flkty.player.unpause()
// unpauses autoPlay

[brandondurham]

Oh, fantastic. Thank you!

[ochoarobert1]

I cannot do it via jQuery, i'm trying to do like this:

heightW = $( window ).height(); $(document).scroll(function() { scroll_pos = $(this).scrollTop(); if(scroll_pos > heightW ) { $('.main-gallery').flickity.player.stop(); } else { $('.main-gallery').flickity.player.play(); } });

[desandro]

@ochoarobert1 You can get the Flickity instance with .data('flickity') http://flickity.metafizzy.co/api.html#jquery-fn-data-flickity

[DavidScanu]

function flickityLayout(selector) {

  selector.each(function(index, el) {
    var galleryFlkty = $(this).removeClass('is-hidden').flickity({
      // options
      cellSelector: '.gallery-item',
      imagesLoaded: true,
      cellAlign: 'left',
      contain: true,
      setGallerySize: false, // set gallery height in css
      prevNextButtons: false,
      pageDots: false,
      wrapAround: true
    });
    // access Flickity's instance properties
    var flkty = galleryFlkty.data('flickity');

    $(this).live({
      mouseenter: function () {
        // flick first slide on hover
        galleryFlkty.flickity('next');
        // starts autoPlay
        flkty.player.play();
      },
      mouseleave: function () {
        // Back to first slide
        // galleryFlkty.flickity('select', 0);
        // stops autoPlay
        flkty.player.stop();

      }
    });
  });
};
flickityLayout ( $('.gallery') );

This works great.

How can I manage to : a - When I hover over the flickity gallery, the first slide flicks only afetr a 1000 delay. (not default 3000). b - Set the autoplay value to 2000 (instead of the default 3000).

Edit : I manage to achieve what is written above. It is not the most elegant way to do it.

function flickityLayout(selector) {

  // show
  selector.each(function(index, el) {
    var galleryFlkty = $(this).removeClass('is-hidden').flickity({
      // options
      cellSelector: '.gallery-item',
      imagesLoaded: true,
      cellAlign: 'left',
      contain: true,
      setGallerySize: false, // set gallery hieght in css
      prevNextButtons: false,
      pageDots: false,
      wrapAround: true // infinite scroll
      // autoplay: 1500,
      // pauseAutoPlayOnHover: false
    });
    // access Flickity's instance properties
    var flkty = galleryFlkty.data('flickity');

    // flkty.player.pause();

   // Define variables outside the scope of the mouseenter function
    var timer;
    var interval;

    $(this).live({
      mouseenter: function () {
      // When mouse enters, we set a delay to execute the function
        timer = setTimeout(function() {
          // Flick the first slide
          galleryFlkty.flickity('next');
         // Flick the next slide every 2000 ms
          interval = setInterval(function() {
            galleryFlkty.flickity('next');
          }, 2000);
        }, 1000);
      },
      mouseleave: function () {
        // Clear the timeout
        clearTimeout(timer);
       // Stops the 'pseudo' autoplay
        clearInterval(interval);
        // Back to first slide
        // galleryFlkty.flickity('select', 0);
        // stops autoPlay
        // flkty.player.stop();          
      }
    });
  });
};

flickityLayout ( $('.gallery') );

[desandro]

v1.2.0 has added proper auto-play API: playPlayer, stopPlayer, pausePlayer, unpausePlayer.