rentageekmom of LDM Devs
8/7/2015 - 1:01 AM

Add Swipe support to Bootstrap Carousel using touchSwipe

Add Swipe support to Bootstrap Carousel using touchSwipe

jQuery(document).ready(function($) {
/* 
*  
*  Get TouchSwipe JS File and ENQUEUE it please,
*  Unless you only need it on one page. :) 
*  
*  https://github.com/mattbryson/TouchSwipe-Jquery-Plugin
*  Then create a Boostrap carousel in the normal way,
*  and add this script to the appropriate page. 
*  Don't forget to change the target (#carousel-gallery-mobile) to 
*  the right class or ID for your carousel.
* 
*/

$("#carousel-mobile-gallery").swipe( 
	 	{ 
	 		fingers:'all', 
	 		swipeLeft:swipeCarouselNext, 
	 		swipeRight:swipeCarouselPrev, 
	 		allowPageScroll:"auto",
	 		threshold:0
	 	}

	 );
  
  function swipeCarouselNext(event, direction, distance, duration, fingerCount) {
    $('#carousel-mobile-gallery').carousel('next'); 
  }

  function swipeCarouselPrev(event, direction, distance, duration, fingerCount) {
    $('#carousel-mobile-gallery').carousel('prev');
  }
  
}); // End Document Ready