AnythingSliderでスワイプを適用する方法

Question

documentationに記載されているswipe supportを使用していますが、埋め込みのYouTube動画では機能しません。

Answer 1

問題は、YouTube動画は実際にはHTML5と埋め込みビデオが入ったiframeです。そのため、動画をスワイプしても、iframe以外のコンテンツには登録されません。最も簡単な解決策は、ビデオの上にオーバーレイを配置し、ビデオだけをカバーすることです。この問題は、ビデオを再生するためにビデオをタップすることができないということです。コントロールを使用する必要があります。

this updated demoでは、オーバーレイは動画をカバーし、コントロールを表示したままにします（スワイプオーバーレイCSSにbackground: #f00;を追加して表示します）。コントロールの高さは40ピクセルなので、オーバーレイの高さがこれを考慮していることがわかります。

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

これは、更新された初期化コードである：ここ

は、CSSである（スライダは、このデモのために、サイズが300×200である）

$('#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; 
       } 
      }); 
    } 

});