Jquery触摸启用滑块

Question

I have setup a slider, here is jsfiddler http://jsfiddle.net/zZv5B/ . How can I enable it for touch devises, I want to be able to swipe through panel area to slide next and prev slide. any idea would be really appreciated.

var currentIndex = 0;// store current pane index displayed
var ePanes = $('#slider .panel');// store panes collection
function showPane(index){// generic showPane
    // hide current pane
    ePanes.eq(currentIndex).stop(true, true).fadeOut();
    // set current index : check in panes collection length
    currentIndex = index;
    if(currentIndex < 0) currentIndex = ePanes.length-1;
    else if(currentIndex >= ePanes.length) currentIndex = 0;
    // display pane
    ePanes.eq(currentIndex).stop(true, true).fadeIn();
    // menu selection
    $('.nav li').removeClass('current').eq(currentIndex).addClass('current');
}
// bind ul links
$('.nav li').click(function(ev){    showPane($(this).index());});
// bind previous & next links
$('.previous').click(function(){    showPane(currentIndex-1);});
$('.next').click(function(){    showPane(currentIndex+1);});
// apply start pane
showPane(0);

Answer 1

Use the events ( more here ) 'touchstart' and 'touchend' and get the start X position and the end x position. You can then compare the two and determine which direction the touch/swipe has happend.

var xStart, xEnd;
$('.wrap').on('mousedown touchstart', function (e) {     
    //get start x position
    xStart = e.pageX;
}).on('mouseup touchend', function (e) {
    //get the end x position 
    xEnd = e.originalEvent.pageX;
    if (xStart != xEnd) {
        //swiped
        if (xStart < xEnd) {
            console.log('Right');
            showPane(currentIndex + 1);
        }
        if (xStart > xEnd) {
            console.log('Left');
            showPane(currentIndex - 1);
        }
    }
});

example fiddle - not sure how browser compatibile this is.

Or you could just use my fave touch enabled slider swipejs

UPDATE: To make it work correctly for mobile changed xEnd = e.originalEvent.pageX as per @User543294's comment

Also a new fiddle example to using e.changedTouches[0].pageX as per MDN documetation

Answer 2

I just came across TouchSwipe . It seems pretty nice, straightforward, and robust.

Maybe something like this?

var swipe_obj = { 
    swipeLeft: function(event, direction, distance, duration, fingerCount) { 
        $(".next").click(); }, 
    swipeRight: function(event, direction, distance, duration, fingerCount) { 
        $(".previous").click(); }, 
};

$(".nav li").swipe(swipe_obj);

Answer 3

Many touch devices also trigger a click, after a touch event. They usually follow a secuence similar to this: a touch happens, then it will be fired the events "touchstart" -> "touchend" -> "click". Where that last click it's a fake one, and has a huge delay respect native events. But it also works.

So, if efficiencie don't care, don't worry. Your slider will work as you expected it will do.

But if you are interested in to achieve a good performance, I recommend you to handle native events directly. Which can be done using Modernizr dinamic testing.

It's a simple idea:

1 Download and link the Modernizr library into your code. 2 Test at the first line of your code which kind of events you can expect, based on device capabilities. A single line of javascript will be enough:

var actualEvent = (Modernizr.touch) ? 'touchstart' : 'click';

Extra points if you do this before onReady occurs.

3 Move your current handlers into the "on" form:

$('selector').on(actualEvent, callback)

Then you will be always handling the real event, not the simulated click fired by tablets and phones. Because the test at the beginning ensures you that "actualEvent" will be "touchstart" just on touchable devices and "click" for the rest.

Of course, you can substitute "touchstar" by the touch event you want. But I think that "touchstar" is the one who best suits your needs.