CODEWITHSUNDEEP
jquerynavigationtouchcustomizationflexslider
Staffan Estberg
Staffan Estberg

Reputation: 7035

Manual touch control for Flexslider

I've set up a Flexslider (http://woothemes.com/flexslider/) where some of the slides contain video content. On a touch device, these slides can be hard to navigate as they're not swipable because of the embeded video player. I thought of the idea to have a specific touch area below these specific slides that registers previous/next as the user swipes it, but I haven't seen any custom options for this in the Flexslider documentation. Any ideas on how to solve this?

Upvotes: 0

Views: 7158

Answers (1)

Gajotres
Gajotres

Reputation: 57309

Working example: http://jsfiddle.net/Gajotres/xsGqn/

Basically I am creating an overlay over whole Flexslider surface. It will cover the slider and float over it. Only button next and previous will float over it. Second thing we need is an excellent hammer.js framework that will give us swipe functionality. This example is created on a basis of Flexslider 2. Overlay will cover only 70% in height so that video controls can be accessible.

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

Upvotes: 2

Related Questions