Cross device Carousel.

carousel.css

.carousel {
     width:100%;
     position: relative;
     overflow:hidden;
   }
   .carousel ul {
     width: 300%;
     overflow:hidden; 
     position:absolute;
      -webkit-transition: all 0.5s ease-in-out;
      -moz-transition: all 0.5s ease-in-out;
    position:relative;
    left:0;
   }
   .carousel ul li {
     float:left;
     width: 33.33333%;
   }
   .carousel .dots {
     position:absolute;
     left:0;
     bottom:5px;
     z-index:99;
     width:100%;
     text-align:center;
     opacity: 0.5;
   }
   .carousel .dots span{
    display:inline-block;
    width: 10px;
    height:10px;
    border-radius: 10px;
    background: #bebebe;
    margin:0 3px;
  }
  .carousel .dots span.active{
    background: #000;
  }
  .carousel a.next,
  .carousel a.prev {
    visibility:hidden;
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    width:40px;
    display:block;
    z-index:2;
    cursor:pointer;
    background: rgba(255,255,255,0.3); 
  }
  .carousel a.next span,
  .carousel a.prev span {
    position:absolute;
    left:50%;
    margin-left: -12px;
    top:50%;
    margin-top: -12px;
    display:block;
    background: transparent url(../img/style/arrows.png) 0 0 no-repeat;
    width: 23px;
    height:23px;
  }
  .carousel a.next span {
    background-position: right 0;
  }
  .carousel a.next.disable span,
  .carousel a.prev.disable span {
    opacity:0.5;
  }
  .carousel a.next {
    left:auto;
    right:0;
  }

carousel.js

var Carousel= {
		init: function(options,elem) {

			this.options = $.extend({},this.options,options);
			
			this.elem  = elem;
		    this.$elem = $(elem);
		    
		    this.sem=true;
		    
		    //init
		    

		    this.eventBinding();
		    
		    this.options.sizeList = $('ul li',this.elem).size();
		    
		    
		    //create dots
		    if(this.options.sizeList > 1) {	
			    var $dots= $('<div></div>');
			    for(var i=0; i<  this.options.sizeList; i++ )
			    	$dots.append($('<span class="'+( i==0 ? "active" : " " )+'"></span>'));
			    $('.dots',this.elem).empty().append($dots.html());
		    }
		    else {
		    	$('a.prev,a.next', this.$elem).hide();
		    }
		    
		    this.options.singleWidth = 100/ this.options.sizeList;
		    //ul li resize
		    $('ul',this.elem).css('width', this.options.sizeList*100+'%');
		    $('ul li',this.elem).css('width',this.options.singleWidth+'%');


		    return this;
		},
		reset: function() {
			
		},
		options: {
			idx: 0
		},
		eventBinding: function(){
			var that= this;
			
			$('a.prev', this.$elem).bind('tap',{"self":that,"carousel": $('ul', that.elem)},that.leftClickHandler);
			$('a.next', this.$elem).bind('tap',{"self":that,"carousel": $('ul', that.elem)},that.rightClickHandler);
			$('ul',this.elem).bind('swiperight',{"self":that,"carousel": $('ul', that.elem)},that.leftClickHandler);
			$('ul',this.elem).bind('swipeleft',{"self":that,"carousel": $('ul', that.elem)},that.rightClickHandler).bind('webkitTransitionEnd',function(){that.sem=true});
			
			//show arrows on tap
			if(Modernizr.touch && !$('html').hasClass('blackberry')) { //touchable device
				var visible = $('a.prev', that.$elem).is(':visible');
				$('ul',this.elem).bind('tap',function(){
					if(!visible) {
						that.showArrows();
						visible = true;
					}	
					else {
						that.hideArrows();
						visible = false;
					}	
				})
			}
			
			
		},
		showArrows: function() {
			var that = this;
			$('a.prev,a.next', this.$elem).css('visibility','visible');
			clearTimeout(this.arrowTimer);
			this.arrowTimer = setTimeout(function(){that.hideArrows()},1500)

		},
		hideArrows: function() {
			$('a.prev,a.next', this.$elem).css('visibility','hidden');
			clearTimeout(this.arrowTimer);
		},
		leftClickHandler: function(e){
			
			var that= e.data.self;
			var $carousel = e.data.carousel;
			var idx= that.options.idx;
			var step= -1*that.options.singleWidth;
			if(that.sem && !$('a.prev', that.elem).hasClass('disable')) {
				that.sem =false;
				if(idx > 0) {
					idx--;
					
					if(Modernizr.csstransitions)	
						$carousel.css({'left' : ((idx)*step*that.options.sizeList)+'%'});
					else
						$carousel.animate({'left' : ((idx)*step*that.options.sizeList)+'%'},500,function(){that.sem=true;});
					
					
					
					$('.dots span', that.elem).removeClass().eq(idx).addClass('active');
					if(idx == 0) 
						$('a.prev', that.elem).addClass('disable');
					that.options.idx= idx;
				}
				
				$('a.next',that.elem).removeClass('disable');
			}
			if(Modernizr.touch && !$('html').hasClass('blackberry'))
				that.showArrows();
			e.preventDefault();
		},
		rightClickHandler: function(e){
 			
			var that= e.data.self;
			var $carousel = e.data.carousel;
			var idx= that.options.idx;
			var step= -1*that.options.singleWidth;
			
			if(that.sem && !$('a.next', that.elem).hasClass('disable')) {
				that.sem =false;
				
				
				if(idx < that.options.sizeList-1) {
					idx++;
					
					if(Modernizr.csstransitions)	
						$carousel.css({'left' : ((idx)*step*that.options.sizeList)+'%'});
					else
						$carousel.animate({'left' : ((idx)*step*that.options.sizeList)+'%'},500,function(){that.sem=true;});
					
					$('.dots span', that.elem).removeClass().eq(idx).addClass('active');
					if(idx == that.options.sizeList-1) 
						$('a.next', that.elem).addClass('disable');
					that.options.idx= idx;
				}
				$('a.prev',that.elem).removeClass('disable');
			}
			if(Modernizr.touch && !$('html').hasClass('blackberry'))
				that.showArrows();
			e.preventDefault();
		}
}

if ( typeof Object.create !== 'function' ) {
	    Object.create = function (o) {
	        function F() {}
	        F.prototype = o;
	        return new F();
	    };
}

//Bridge
$.plugin = function(name, object) {
	$.fn[name] = function(options) {
                // optionally, you could test if options was a string
                // and use it to call a method name on the plugin instance.
		return this.each(function() {
			if ( ! $.data(this, name) ) {
				$.data(this, name, Object.create(object).init(options, this));
			}
		});
	};
};


$.plugin('carousel',Carousel);

Modernizr Required

Markup

<div class="carousel">
       <a  title="next" class="next"><span></span></a>
       <a  title="prev" class="prev disable"><span></span></a>
       <ul>
         <li></li>
         <li></li>
       </ul>
       <div class="dots"></div>
</div>