function slideShow() {  
  
    //Set the opacity of all images to 0  
    $('div .slide').css({opacity: 0.0});  
		
		//Set the css for the show  
    $('div .slide').css({'position':'absolute'});  
    $('div #slideshow').css({'position':'relative','height':'400px'});
<!--     $('div #slideshow #slidesContainer').css({'position':'relative','height':'400px'}); -->
      
    //Get the first image and display it (set it to full opacity)  
    $('div .slide:first').css({opacity: 1.0})
    .removeClass('slide')  
    .addClass('slide_show');  

            
// Insert left and right arrow controls in the DOM
  $('#slideshow')
    .append('<div class="controls"><p><a href="#" id="prev">prev</a> | <a href="#" id="next">next</a></p></div>');
//Set the css for the controls  
    $('div .controls').css({'position':'relative','top':'358px'}); 

    	
// Bind the click to the prev/next links
   	$('#next')
    .bind('click', function(){
   		gallery('next') 
			}
		);
		$('#prev')
    .bind('click', function(){
   		gallery('prev') 
			}
		);
}  
  
function gallery(direction) {  
      
    //if no IMGs have the show class, grab the first image  
    var current = ($('div .slide_show')?  $('div .slide_show') : $('div .slide:first'));  
      
    //Get next image, if it reached the end of the slideshow, rotate it back to the first image  
    var next = (current.next().hasClass('slide'))? current.next() : $('div .slide:first') ;      

    //Get prev image, if it reached the beginning of the slideshow, rotate it back to the last image  
    var prev = (current.prev().hasClass('slide'))? current.prev() : $('div .slide:last') ;      
    
  if(direction=='next'){
                
    //Set the fade in effect for the next image, show class has higher z-index  
    next.css({opacity: 0.0}) 
    .removeClass('slide')  
    .addClass('slide_show')  
    .animate({opacity: 1.0}, 1000);  
  }
  else{
  
  //Set the fade in effect for the next image, show class has higher z-index  
    prev.css({opacity: 0.0}) 
    .removeClass('slide')  
    .addClass('slide_show')  
    .animate({opacity: 1.0}, 1000);  
  
  }
  
    //Hide the current image  
    current.animate({opacity: 0.0}, 1000)  
    .removeClass('slide_show')  
    .addClass('slide');        
             
}  

$(document).ready(function() {        
    slideShow();  
}
);