カルーセルで動画の一時停止/再生を制御するにはどうすればよいですか？

Question

flickity carousel library（here on codepen）を使用して作成したビデオカルーセルがあります。私がしたいのは、ユーザーがカルーセルをスライドさせると、選択したスライドが再生を停止し、選択された中間の位置にあるスライドが再生を開始するということです。今、jQueryのを使用して、私が最初に再生するには、選択したスライドを取得：

$(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); 
     }); 

}); 

をしかし、スライドが位置を切り替えると、選択したスライドには、単に「位置を移動して再生を続け、新しいスライドが中間位置をとりながらのdoesn遊ぶ。

カルーセルがスライドするたびにこれらの機能を更新する方法はありますか？

Answer 1

私は実際にこれを行うための最良の方法だと思った。 。

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); 
     }); 

    }); 

が選択したビデオを再生します：カルーセルがスライドまたはautoplayedされた後に決済するたびに発射カルーセル、'settle.flickity'、のためのイベントがあります（詳細はhere on flickityflickityイベントについてしたがって、このコードを読み取ることができます選択されていない動画を一時停止します。