html - How to change the type of transitions between slides in this jquery slider? -

can me change type of transitions between slides in jquery slider ? using slider called blueberry made ​​by mark tyrrell , wanted deslizacem slides left .

(function($){  	$.fn.extend({  		blueberry: function(options) {    			//default values plugin options  			var defaults = {  				interval: 5000,  				duration: 500,  				  				lineheight: 1,  				height: 'auto', //reserved  				hoverpause: false,  				pager: true,  				nav: true, //reserved  				keynav: true  			}  			var options =  $.extend(defaults, options);     			return this.each(function() {  				var o = options;  				var obj = $(this);    				//store slide , pager li  				var slides = $('.slides li', obj);  				var pager = $('.pager li', obj);    				//set initial current , next slide index values  				var current = 0;  				var next = current+1;    				//get height , width of initial slide image , calculate size ratio  				var imgheight = slides.eq(current).find('img').height();  				var imgwidth = slides.eq(current).find('img').width();  				var imgratio = imgwidth/imgheight;    				//define vars setsize function  				var sliderwidth = 0;  				var cropheight = 0;    				//hide slides, fade in first, add active class first slide  				slides.hide().eq(current).fadein(o.duration).addclass('active');  				    				//build pager if doesn't exist , if enabled  				if(pager.length) {  					pager.eq(current).addclass('active');  				} else if(o.pager){  					obj.append('<ul class="pager"></ul>');  					slides.each(function(index) {  						$('.pager', obj).append('<li><a href="#"><span>'+index+'</span></a></li>')  					});  					pager = $('.pager li', obj);  					pager.eq(current).addclass('active');  				}    				//rotate selected slide on pager click  				if(pager){  					$('a', pager).click(function() {  						//stop timer  						cleartimeout(obj.play);  						//set slide index based on pager index  						next = $(this).parent().index();  						//rotate slides  						rotate();  						return false;  					});  				}    				//primary function change slides  				var rotate = function(){  					//fade out current slide , remove active class,  					//fade in next slide , add active class  					slides.eq(current).fadeout(o.duration).removeclass('active')  						.end().eq(next).fadein(o.duration).addclass('active').queue(function(){  							//add rotatetimer function end of animation queue  							//this prevents animation buildup caused requestanimationframe  							//rotatetimer starts timer next rotate  							rotatetimer();  							$(this).dequeue()  					});    					//update pager reflect slide change  					if(pager){  						pager.eq(current).removeclass('active')  							.end().eq(next).addclass('active');  					}    					//update current , next vars reflect slide change  					//set next first slide if current last  					current = next;  					next = current >= slides.length-1 ? 0 : current+1;  				};  				//create timer control slide rotation interval  				var rotatetimer = function(){  					obj.play = settimeout(function(){  						//trigger slide rotate function @ end of timer  						rotate();  					}, o.interval);  				};  				//start timer first time  				rotatetimer();    				//pause slider on hover  				//disabled default due bug  				if(o.hoverpause){  					slides.hover(function(){  						//stop timer in mousein  						cleartimeout(obj.play);  					}, function(){  						//start timer on mouseout  						rotatetimer();  					});  				}    				//calculate , set height based on image width/height ratio , specified line height  				var setsize = function(){  					sliderwidth = $('.slides', obj).width();  					cropheight = math.floor(((sliderwidth/imgratio)/o.lineheight))*o.lineheight;    					$('.slides', obj).css({height: cropheight});  				};  				setsize();    				//bind setsize function window resize event  				$(window).resize(function(){  					setsize();  				});  				  				    				//add keyboard navigation    				if(o.keynav){  					$(document).keyup(function(e){    						switch (e.which) {    							case 39: case 32: //right arrow & space    								cleartimeout(obj.play);    								rotate();    								break;      							case 37: // left arrow  								cleartimeout(obj.play);  								next = current - 1;  								rotate();    								break;  						}    					});  				}      			});  		}  	});  })(jquery);

.blueberry { margin: 0 auto; }  .blueberry .slides {  	display: block;  	position: relative;  	overflow: hidden;  }  .blueberry .slides li {  	position: absolute;  	top: 0;  	left: 0;  	overflow: hidden;  }  .blueberry .slides li img {  	display: block;  	width: 100%;  	max-width: none;  }  .blueberry .slides li.active { display: block; position: relative; }  .blueberry .crop li img { width: auto; }    .blueberry .pager {  	height: 40px;  	text-align: center;  }  .blueberry .pager li { display: inline-block; }  .blueberry .pager li a,  .blueberry .pager li span {  	display: block;  	height: 4px;  	width: 4px;  }  .blueberry .pager li {  	padding: 18px 8px;  -webkit-border-radius: 6px;     -moz-border-radius: 6px;  	border-radius: 6px;  }  .blueberry .pager li span {  	overflow: hidden;  	background: #c0c0c0;  	text-indent: -9999px;  -webkit-border-radius: 2px;     -moz-border-radius: 2px;  	border-radius: 2px;  }  .blueberry .pager li.active span { background: #404040; }

<!doctype html>    <html lang="en">    <head>  <meta charset="utf-8">  <meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1" />  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>  <script>  $(window).load(function() {  $('.blueberry').blueberry()  });  </script>        <title>slides</title>    </head>    <body>	  <div id="doc">  		<div id="cont-slider">  			<div class="blueberry">  				<ul class="slides">  				<li>                    <img src="http://marktyrrell.com/labs/blueberry/img/slide3.jpg"/>                    </li>  				<li><img src="http://marktyrrell.com/labs/blueberry/img/slide4.jpg"/></li>  				<li><img src="http://marktyrrell.com/labs/blueberry/img/slide1.jpg"/></li>  				</ul>  			</div>  		</div>  	  	</div>    </body>  </html>