How to swipeleft and swiperight
Solution 1
You can add touch-swipe using jQuery UI Touch Punch.
Using Touch Punch is as easy as 1, 2… Just follow these simple steps:
-
Include jQuery and jQuery UI on your page.
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> <script src="http://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script>
-
Include Touch Punch after jQuery UI and before its first use.
Please note that if you are using jQuery UI's components, 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>
-
Make the object you want to swipe draggable.
<script>$('.selector').draggable();</script>
Solution 2
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.
Solution 3
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:
- touchstart
- touchmove
- touchend
- touchenter
- touchleave
- 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.com/javatutors/touchevents2.shtml
Phillip Senn
Developer in: Microsoft SQL Server, Adobe ColdFusion (and Lucee), HTML, CSS, JavaScript (with jQuery's help). Tools: Dreamweaver, Fireworks, Beyond Compare. Adjunct Instructor: Lenoir-Rhyne University. Twitter: @PhillipSenn
Updated on June 28, 2022Comments
-
Phillip Senn about 2 years
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.
-
Phillip Senn over 10 yearsOh... So I would have to load jQuery Mobile... I was hoping to use twitter bootstrap.
-
Phillip Senn over 10 yearsOh ok, thanks! I don't necessary need vanilla js, but I'll read the article. I just need to swipe from 1 picture to the next.
-
Zajn over 10 yearsAs far as I know, bootstrap's JS only defines events for the plugins that it includes. According to their documentation, they don't officially support 3rd party libraries either, so there may be some conflicts you'll have to resolve if you use bootstrap events + jQuery/jQuery Mobile.
-
РАВИ over 10 yearsJquery doesn't do touch, you can use jquery mobile to accomplish without much javascript code.Here is the answer: javascriptkit.com/javatutors/touchevents3.shtml
-
Phillip Senn over 10 yearsOK, well, I've had some experience with jQuery Mobile, so I guess my answer is to use it. Thanks!
-
Foreever over 10 years@Phillip I don't think you should use jQuery MObile just for getting 'swipe' event. IMO use jQueryMobile if your are planning to develop a mobile application website. Maybe you could add Swipe event using jQuery UI Touch Punch.
-
Phillip Senn over 10 yearsWow! Thanks Foreever! Love them plugins!
-
Phillip Senn over 10 yearsOK, after sleeping on it I've decided to check your answer instead.