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 X 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; 
       } 
      }); 
    } 

});