Jquery content slider not working

Question

I am trying to create a content slider using jquery.

1. By default the slider should show the first content

2. On "next " click I want to display the next content (which is inside my div (class name:sp)) which should show up sliding from right to left and

3. On "previous" click I want to display the previous content which should show up sliding from right to left

I have manged to develop the following code but its not working at all.

Could you please tell me where the mistake is?

You can check my code here also : http://jsfiddle.net/zLGQJ/1/

HTML

<div id="button-previous"><a>prev</a></div><div id="button-next"><a>next</a></div>

<div class="featured_Content">

<div class="sp">
  <div><h2>Demo Title 1</h2></div>
 <div style="float:right;"><img src="image.jpg" width="250" height="150" /></div>
  <div style="float:right;">My text</div>
  <div style="clear:both;"></div> 
</div>

<div class="sp">
  <div><h2>Demo Title 1</h2></div>
 <div style="float:right;"><img src="image.jpg" width="250" height="150" /></div>
  <div style="float:right;">My text</div>
  <div style="clear:both;"></div> 
</div>

<div class="sp">
  <div><h2>Demo Title 1</h2></div>
 <div style="float:right;"><img src="image.jpg" width="250" height="150" /></div>
  <div style="float:right;">My text</div>
  <div style="clear:both;"></div> 
</div>

</div>  

CSS:

.featured_Content{
  width:500px;
  height:200px; 
  position:relative;

 } 
.sp {width:500px; height:200px; position:absolute;}

Jquery:

 $(document).ready(function(){
 $('.sp').first().addClass('active');
 $('.sp').hide();    
 $('.active').show();


 $('#button-next').click(function(){

   $('.active').removeClass('active').addClass('oldActive');    

    if ( $('.oldActive').is(':last-child')) {
    $('.sp').first().addClass('active');
    }
    else{
    $('.oldActive').next().addClass('active');
    }

    $('.oldActive').removeClass('oldActive');
    $('.sp').fadeOut();
    $('.active').show("slide", { direction: "left" }, 1000);


});

$('#button-previous').click(function(){
$('.active').removeClass('active').addClass('oldActive');   

   if ( $('.oldActive').is(':first-child')) {

        $('.sp').last().addClass('active');

    }
       else{
 $('.oldActive').prev().addClass('active');
       }
 $('.oldActive').removeClass('oldActive');
 $('.sp').fadeOut();
 $('.active').show("slide", { direction: "left" }, 1000);
 });


});

Answer 1

$('#button-previous').click(function () {
    $('.active').removeClass('active').addClass('oldActive');

    if ($('.oldActive').is(':first-child')) {

        $('.sp').last().addClass('active');

    } else {
        $('.oldActive').prev().addClass('active');
    }
    $('.oldActive').removeClass('oldActive');
    $('.sp').fadeOut();
    $('.active').show("slide", {
        direction: "right"
    }, 1000);
});

The

$('.active').show("slide", {
        direction: "left"
    }, 1000);

Was the problem.

Fiddle