Flexslider 的手动触摸控制答案

【问题标题】：Manual touch control for FlexsliderFlexslider 的手动触摸控制
【发布时间】：2013-05-31 13:28:14
【问题描述】：

我设置了一个 Flexslider (http://woothemes.com/flexslider/)，其中一些幻灯片包含视频内容。在触摸设备上，这些幻灯片可能难以导航，因为由于嵌入了视频播放器，它们不可滑动。我想到了在这些特定幻灯片下方有一个特定触摸区域的想法，该区域在用户滑动时注册上一个/下一个，但我在 Flexslider 文档中没有看到任何自定义选项。关于如何解决这个问题的任何想法？

【问题讨论】：

标签： jquery navigation touch customization flexslider

【解决方案1】：

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

基本上我是在整个 Flexslider 表面上创建一个叠加层。它将覆盖滑块并漂浮在上面。只有按钮下一个和上一个会浮在上面。我们需要的第二件事是一个出色的 hammer.js 框架，它将为我们提供滑动功能。这个例子是在 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;    
}

【讨论】：

哇，感谢您提供如此详尽的回答！我真的很喜欢这种方法，会确保尽快实施和尝试。希望 Flexslider 团队能够在未来的版本中提出自己的解决方案。