Question

我对Orbit Slider有疑问。

我想在滑块中放置一个YouTube视频。我使用 div 和嵌入来替换 img 并获得了成功。视频可以播放和停止。

我的问题是，当用户在滑块上的视频上按 PLAY 时，如何让滑块的计时器停止？

Answer 1

如果您查看Orbit滑块javascript，它可以使用事件。在Orbit JS文件中查找这些代码

  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元素（当使用Foundation设置Orbit时，它通常具有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>
*/

使用Orbit Slider和视频

1 个答案: