add swipe support to bootstrap carousel

[Costas]

http://buildbetteronline.com/?p=99 - add swipe support to the image slider being used on the site. This particular site was using Bootstrap css framework and I was using the bootstrap carousel component for the slider.

<script>
/** homepage http://www.netcu.de/jquery-touchwipe-iphone-ipad-library
 * jQuery Plugin to obtain touch gestures from iPhone, iPod Touch and iPad, should also work with Android mobile phones (not tested yet!)
 * Common usage: wipe images (left and right to show the previous or next image)
 * 
 * @author Andreas Waltl, netCU Internetagentur (http://www.netcu.de)
 * @version 1.1.1 (9th December 2010) - fix bug (older IE's had problems)
 * @version 1.1 (1st September 2010) - support wipe up and wipe down
 * @version 1.0 (15th July 2010)
 */
(function($) { 
   $.fn.touchwipe = function(settings) {
     var config = {
    		min_move_x: 20,
    		min_move_y: 20,
 			wipeLeft: function() { },
 			wipeRight: function() { },
 			wipeUp: function() { },
 			wipeDown: function() { },
			preventDefaultEvents: true
	 };
     
     if (settings) $.extend(config, settings);
 
     this.each(function() {
    	 var startX;
    	 var startY;
		 var isMoving = false;

    	 function cancelTouch() {
    		 this.removeEventListener('touchmove', onTouchMove);
    		 startX = null;
    		 isMoving = false;
    	 }	
    	 
    	 function onTouchMove(e) {
    		 if(config.preventDefaultEvents) {
    			 e.preventDefault();
    		 }
    		 if(isMoving) {
	    		 var x = e.touches[0].pageX;
	    		 var y = e.touches[0].pageY;
	    		 var dx = startX - x;
	    		 var dy = startY - y;
	    		 if(Math.abs(dx) >= config.min_move_x) {
	    			cancelTouch();
	    			if(dx > 0) {
	    				config.wipeLeft();
	    			}
	    			else {
	    				config.wipeRight();
	    			}
	    		 }
	    		 else if(Math.abs(dy) >= config.min_move_y) {
		    			cancelTouch();
		    			if(dy > 0) {
		    				config.wipeDown();
		    			}
		    			else {
		    				config.wipeUp();
		    			}
		    		 }
    		 }
    	 }
    	 
    	 function onTouchStart(e)
    	 {
    		 if (e.touches.length == 1) {
    			 startX = e.touches[0].pageX;
    			 startY = e.touches[0].pageY;
    			 isMoving = true;
    			 this.addEventListener('touchmove', onTouchMove, false);
    		 }
    	 }    	 
    	 if ('ontouchstart' in document.documentElement) {
    		 this.addEventListener('touchstart', onTouchStart, false);
    	 }
     });
 
     return this;
   };
 
 })(jQuery);

			$(function() {
				
				jQuery("#carousel-example-generic").touchwipe({
			          wipeLeft: function() { jQuery("#carousel-example-generic").carousel('next'); },
			          wipeRight: function() { jQuery("#carousel-example-generic").carousel('prev'); },
			          min_move_x: 20,
			          preventDefaultEvents: false
				});
			}); //jQ ends
</script>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  [LIST=1]
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active">
    <li data-target="#carousel-example-generic" data-slide-to="1">
    <li data-target="#carousel-example-generic" data-slide-to="2">
  [/LIST]

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      [img]0001.jpg[/img]
      <div class="carousel-caption">
        
      </div>
    </div>
    <div class="item">
      [img]0001_2.jpg[/img]
      <div class="carousel-caption">
        
      </div>
    </div>
    
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    [B][/B]
    [B]Previous[/B]
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    [B][/B]
    [B]Next[/B]
  </a>
</div>