Flexslider的手動觸摸控制

我已經設置了Flexslider（http://woothemes.com/flexslider/），其中一些幻燈片包含視頻內容。在觸控設備上，由於嵌入式視頻播放器的原因，這些幻燈片可能很難導航，因爲它們不能滑動。我想到在這些特定的幻燈片下面有一個特定的觸摸區域，當用戶滑過它時會註冊上一個/下一個幻燈片，但在Flexslider文檔中我沒有看到任何自定義選項。有關如何解決這個問題的任何想法？Flexslider的手動觸摸控制

來源

2013-05-31 Staffan Estberg

工作例如：http://jsfiddle.net/Gajotres/xsGqn/

基本上我創建了整個Flexslider表面的覆蓋。它會覆蓋滑塊並漂浮在其上。只有下一個和上一個按鈕纔會浮在上面。我們需要的第二件事是一個非常好的框架，它會給我們提供滑動功能。這個例子是在Flexslider 2的基礎上創建的。Overlay只覆蓋了70％的高度，因此可以訪問視頻控件。

HTML：

<!DOCTYPE html> 
<html> 
    <head> 
     <title>jQM Complex Demo</title> 
     <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/> 
     <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/> 
     <link rel="stylesheet" href="http://flexslider.woothemes.com/css/flexslider.css" type="text/css" media="screen" />   
     <script src="http://flexslider.woothemes.com/js/jquery.flexslider.js"></script> 
     <script src="http://flexslider.woothemes.com/js/jquery.easing.js"></script> 
     <script src="http://flexslider.woothemes.com/js/jquery.mousewheel.js"></script>   
    </head> 
    <body>  
     <div class="flexslider"> 
      <ul class="slides"> 
       <li> 
        <iframe id="player_1" src="http://player.vimeo.com/video/39683393?api=1&player_id=player_1" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe> 
       </li> 
       <li> 
        <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_lemon.jpg" /> 
       </li> 
       <li> 
        <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_donut.jpg" /> 
       </li> 
       <li> 
        <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_caramel.jpg" /> 
       </li> 
      </ul> 
     </div> 
    </body> 
</html>

的Javascript：

$(window).load(function() { 

    $(document).hammer().on("swipeleft", ".flex-overlay", function(event) { 
     $('.flexslider').flexslider("next") //Go to next slide 
    }); 

    $(document).hammer().on("swiperight", ".flex-overlay", function(event) { 
     $('.flexslider').flexslider("prev") //Go to previous slide 
    }); 

    $('.flexslider').flexslider({ 
     animation: "slide", 
     controlNav: "thumbnails", 
     start: function(){ 
      $('<div>').attr('class','flex-overlay').appendTo('.flex-viewport'); 
     } 
    }); 
});

CSS：

.flex-overlay { 
    position:absolute; 
    top:0; 
    left:0; 
    width: 100%; 
    height: 70%; 
    background-color: transparent; 
    z-index: 9999; 
} 

.flex-prev, .flex-next{ 
    z-index: 99999;  
}

來源

2013-05-31 21:01:02 Gajotres

哇，感謝這樣一個完整的答案！我非常喜歡這種方法，將確保實施並儘快嘗試。希望Flexslider團隊能夠在未來的版本中提出自己的解決方案。 –

Flexslider的手動觸摸控制

回答

相關問題