如何在AnythingSlider中刷卡

Question

我正在使用官方documentation中提到的swipe support，但它不适用于嵌入式YouTube视频。

Answer 1

问题是YouTube视频实际上是内嵌HTML5和嵌入视频的iframe。因此，通过视频滑动不会注册iframe外的内容。最简单的解决方案是在视频上放置一个覆盖层，并覆盖视频。问题在于你不能点击视频本身来播放它，你必须使用控件。

在this updated demo中，覆盖图覆盖了视频并使控件可见（将一个background: #f00;添加到滑动覆盖CSS以查看它）。控件的高度为40像素，因此您会看到叠加层的高度将此考虑在内。

这里是CSS（滑块是300×200的尺寸对于本演示）：

.swipe-overlay { 
    position: absolute; 
    width: 300px; 
    height: 160px; 
    top: 0; 
    left: 0; 
} 

，这是更新的初始化代码：

$('#slider').anythingSlider({ 

    // Callback when the plugin finished initializing 
    onInitialized: function(e, slider) { 

     var time = 1000, // allow movement if < 1000 ms (1 sec) 
      range = 50, // swipe movement of 50 pixels triggers the slider 
      x = 0, t = 0, touch = "ontouchend" in document, 
      st = (touch) ? 'touchstart' : 'mousedown', 
      mv = (touch) ? 'touchmove' : 'mousemove', 
      en = (touch) ? 'touchend' : 'mouseup'; 

     $('<div class="swipe-overlay"></div>') 
      .appendTo(slider.$window) 
      .bind(st, function(e){ 
       // prevent image drag (Firefox) 
       e.preventDefault(); 
       t = (new Date()).getTime(); 
       x = e.originalEvent.touches ? e.originalEvent.touches[0].pageX : e.pageX; 
      }) 
      .bind(en, function(e){ 
       t = 0; x = 0; 
      }) 
      .bind(mv, function(e){ 
       e.preventDefault(); 
       var newx = e.originalEvent.touches ? e.originalEvent.touches[0].pageX : e.pageX, 
       r = (x === 0) ? 0 : Math.abs(newx - x), 
       // allow if movement < 1 sec 
       ct = (new Date()).getTime(); 
       if (t !== 0 && ct - t < time && r > range) { 
        if (newx < x) { slider.goForward(); } 
        if (newx > x) { slider.goBack(); } 
        t = 0; x = 0; 
       } 
      }); 
    } 

});