How do I control pausing/playing with videos in a carousel?

Question

I have a video carousel created using the flickity carousel library, seen here on codepen. What I want to happen is that when a user slides the carousel, the selected slide stops playing, then the slide that takes the selected, middle position starts to play. Right now, using jQuery, I get the selected slide to initially play:

$(document).ready(function () {
       var $partnerSlides = $('.partner-slides').flickity();

       function onLoadeddata(event) {
           var cell = $partnerSlides.flickity('getParentCell', event.target);
                $partnerSlides.flickity('cellSizeChange', cell && cell.element);
       }

       $partnerSlides.find('.slide video').each(function (i, video) {
           video.pause();
           $(video).on('durationchange', onLoadeddata);
       });

       $partnerSlides.find('.slide.is-selected video').each(function (i, video) {
           video.play();
           $(video).on('durationchange', onLoadeddata);
       });

});

But when the slides switch position, the selected slide just moves position and keeps playing, while the new slide takes the middle position and doesn't play.

Is there a way to update those functions each time the carousel slides?

score 1 · Accepted Answer · answered Aug 11 '16 at 13:56

I actually figured out what I thought is the best way to do this. There is an event for the carousel, 'settle.flickity', which fires each time the carousel settles after being slid or autoplayed (More can be read about the flickity events here on flickity. Therefore, this code:

var $gallery = $('.partner-slides').flickity(); //this is the carousel

  $gallery.on('settle.flickity', function () {
      console.log('Flickity settled at ' + flkty.selectedIndex);

      $gallery.find('.slide video').each(function (i, video) {
          video.pause();
          $(video).on('loadeddata', onLoadeddata);
      });

      $gallery.find('.slide.is-selected video').each(function (i, video) {
          video.play();
          $(video).on('loadeddata', onLoadeddata);
      });

  });

Will play the selected video and pause any video that is not selected.

How do I control pausing/playing with videos in a carousel?

1 Answers1