Apologies in advance - this is such a fundamental question: Why are swipeleft and swiperight not working?

(function() {
    $('img').on('swiperight', swipeRight);
    function swipeRight(myEvent){ 
        myEvent.stopPropagation();
        alert('swipeRight');
    };

    $('img').on('swipeleft', swipeLeft);
    function swipeLeft(myEvent) { 
        myEvent.stopPropagation();
        alert('swipeLeft');
    };
})();

I've loaded jQuery, but do I need to load a entire library like jQuery Mobile or Angular? I just want to slide from 1 picture to the next.

Apologies in advance - this is such a fundamental question: Why are swipeleft and swiperight not working?

(function() {
    $('img').on('swiperight', swipeRight);
    function swipeRight(myEvent){ 
        myEvent.stopPropagation();
        alert('swipeRight');
    };

    $('img').on('swipeleft', swipeLeft);
    function swipeLeft(myEvent) { 
        myEvent.stopPropagation();
        alert('swipeLeft');
    };
})();

I've loaded jQuery, but do I need to load a entire library like jQuery Mobile or Angular? I just want to slide from 1 picture to the next.

• javascript
• swipe

• 1 I would suggest you take a look at some javascript frameworks such as Hammer JS eightmedia.github.io/hammer.js – njtman Commented Feb 1, 2014 at 3:59
• Good idea. I see that hammer.js is mentioned in JavaScript Weekly – Phillip Senn Commented Feb 1, 2014 at 4:00

3 Answers 3

Standard jQuery doesn't define a swiperight or swipeleft event. jQuery Mobile does, however. You'll have to load that library to utilize those event handlers.

A element doesn't have a swipeleft or swiperight event handler. What you need to use touchstart and touchend. So for touch here are all the event handlers:

1. touchstart
2. touchmove
3. touchend
4. touchenter
5. touchleave
6. touchcancel

With these you can add by using jquery ON method and your function.

To calculate swipe left and swipe right you have to do a caculation using touches[0]. Read the article!!

Here is a resource that helped in in developing for touch screens using vanilla js. http://www.javascriptkit./javatutors/touchevents2.shtml

You can add touch-swipe using jQuery UI Touch Punch.

Using Touch Punch is as easy as 1, 2… Just follow these simple steps:

1. Include jQuery and jQuery UI on your page.

   <script src="http://code.jquery./jquery-1.7.2.min.js"></script>
   <script src="http://code.jquery./ui/1.8.21/jquery-ui.min.js"></script>
   

2. Include Touch Punch after jQuery UI and before its first use.

   Please note that if you are using jQuery UI's ponents, Touch Punch must be included after jquery.ui.mouse.js, as Touch Punch modifies its behavior.

   <script src="jquery.ui.touch-punch.min.js"></script>
   

3. Make the object you want to swipe draggable.

   <script>$('.selector').draggable();</script>