javascript - ビデオでのオービットスライダーの使用

Question

OrbitSliderについて質問があります。

スライダーにYouTubeビデオを配置したい。divとembedを使用してimgを置き換え、成功しました。ビデオは再生および停止できます。

私の質問は、ユーザーがスライダーのビデオでPLAYを押したときに、スライダーのタイマーを停止させるにはどうすればよいですか？

Answer 1

オービットスライダーのJavaScriptを見ると、イベントを使用して機能します。OrbitJSファイルでこれらのコードを探します

  this.$element.bind('orbit.start', function (event, index) {
    self.startClock();
  });

  this.$element.bind('orbit.stop', function (event, index) {
    self.stopClock();
  });

これらは、イベント「orbit.stop」および「orbit.start」イベントをHTML要素にバインドします（OrbitをセットアップするFoundationの方法を使用する場合、通常はIDが「機能」されています）。したがって、HTML要素から「orbit.stop」などのこれらのイベントをトリガーすると、関数stopClock（）が呼び出されます。以下は役立つはずです...

HTML

<a id="stop-button" href="#" class="button rounded">stop</a>
<a id="start-button" href="#" class="button rounded">start</a>

Javascript

$('#stop-button').on('click',function(){
    $('#featured').trigger('orbit.stop');
});

$('#start-button').on('click',function(){
    $('#featured').trigger('orbit.start');
});


/*using the setup 
<div id="featured">
  <img src="../images/orbit-demo/demo1.jpg" />
  <img src="../images/orbit-demo/demo2.jpg" />
  <img src="../images/orbit-demo/demo3.jpg" />
</div>
*/