如何在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; 
       } 
      }); 
    } 

});