<div id="slider">
         <ul>
            <li><img src="img/img1.png" /></li>
            <li><img src="img/img2.png" /></li>
            <li><img src="img/img3.png" /></li>
         </ul>
      </div>
      <script>
         $(document).ready(function(){   
         $("#slider").easySlider({
         orientation:'vertical'
         });
         });
         </script>

#slider {
   position: absolute;
   top: 30%;
   left: 5%;
}

#slider ul, #slider li{
margin:0;
padding:0;
list-style:none;
}

#slider, #slider li {
width:228px;
height:331px;
overflow:hidden;
}

(function($) {

   $.fn.easySlider = function(options){
    
      // default configuration properties
      var defaults = {
         prevId:       'prevBtn',
         prevText:       '<img src="img/flecheh.png" width="30px" height="30px" style="position: absolute; top: 81%; left: 10%"/>',
         nextId:       'nextBtn',   
         nextText:       '<img src="img/flecheb.png" width="30px" height="30px" style="position: absolute; top: 81%; left: 13%"/>',
         orientation:   '', //  'vertical' is optional;
         speed:          2000         
      };
      
      var options = $.extend(defaults, options); 
      
      return this.each(function() { 
         obj = $(this);             
         var s = $("li", obj).length;
         var w = obj.width();
         var h = obj.height();
         var ts = s-1;
         var t = 0;
         var vertical = (options.orientation == 'vertical');
         $("ul", obj).css('width',s*w);         
         if(!vertical) $("li", obj).css('float','left');
         $(obj).after('<span id="'+ options.prevId +'"><a href=\"javascript:void(0);\">'+ options.prevText +'</a></span> <span id="'+ options.nextId +'"><a href=\"javascript:void(0);\">'+ options.nextText +'</a></span>');
         $("a","#"+options.prevId).hide();
         $("a","#"+options.nextId).hide();
         $("a","#"+options.nextId).click(function(){      
            animate("next");
            if (t>=ts) $(this).fadeOut();
            $("a","#"+options.prevId).fadeIn();
         });
         $("a","#"+options.prevId).click(function(){      
            animate("prev");
            if (t<=0) $(this).fadeOut();
            $("a","#"+options.nextId).fadeIn();
         });   
         function animate(dir){
            if(dir == "next"){
               t = (t>=ts) ? ts : t+1;   
            } else {
               t = (t<=0) ? 0 : t-1;
            };                        
            if(!vertical) {
               p = (t*w*-1);
               $("ul",obj).animate(
                  { marginLeft: p },
                  options.speed
               );            
            } else {
               p = (t*h*-1);
               $("ul",obj).animate(
                  { marginTop: p },
                  options.speed
               );               
            }
         };
         if(s>1) $("a","#"+options.nextId).fadeIn();   
      });
    
   };

})(jQuery);