0

flickity carousel libraryを使用して作成されたビデオ カルーセルがあります。こちらは 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);
       });

});

ただし、スライドの位置が切り替わると、選択したスライドは位置を移動して再生を続けますが、新しいスライドは中央の位置になり、再生されません。

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

4

1 に答える 1

1

私は実際にこれを行うための最良の方法だと思うものを見つけました。カルーセルのイベントがあり、'settle.flickity'カルーセルがスライドまたは自動再生された後に安定するたびに発火します (flickityイベントについて詳しくは、 flickity を参照してください。したがって、このコードは次のようになります。

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

  });

選択したビデオを再生し、選択されていないビデオを一時停止します。

于 2016-08-11T13:56:32.137 に答える