Swipe handling to retrofit existing slider with jQuery Mobile UI

Going Mobile

While retro-fitting a client’s website as mobile-friendly and responsive, an existing slider was requested to be outfit with swipe action on mobile devices. This made sense as the experience on mobile was lacking. You just *wanted* to swipe to the next slide.

As the site was already using jQuery and a custom built slider using WordPress’s queries, implementing jQuery Mobile UI API, I was able to quickly detect left and right swipes, and extend the logic to include mobile slider navigation.

Include the jQuery code in your page, and check out the docs:

swipeleft
swiperight

Handle the Swipe:

$(function() {
	// Bind the swipeHandler callback function to the swipe event on the slider div
	$( "#slider_frames" ).on( "swipeleft", swipeHandler );
	$( "#slider_frames" ).on( "swiperight", swipeHandler);

	// Callback function references the event target and finds swipe'#' id
	function swipeHandler( event ) {
		if(event.target.id) {
		var id = event.target.id.split('swipe'),
			id = parseInt(id[1], 10);
			slideCount = $('#slider_frames li').length;
			switch(event.type) {
				case "swipeleft":
					id = (id === 1 ? slideCount : id - 1);
					buttonaction(id);
				break;
				case "swiperight":
					id = (id === slideCount ? 1 : id + 1);
					buttonaction(id);
				break;
			}
		}
	}
});