How to add prev and next button in a JQuery slideshow code

Question

I have jQuery code for a slideshow below. It works perfectly in the project I am working on right now. Although, I would like to implement a previous and next button in the same code if it's possible. Any help would be really appreciated.

<script type="text/javascript">
function() {
  $(".slider #1").show("fade",500);
  $(".slider #1").delay(5500).hide("slide",{direction:"left"},500);
    var sc = $(".slider img").size();
  var count = 2;
    setInterval(function(){
   $(".slider #"+count).show("slide",{direction:"right"},500);
   $(".slider #"+count).delay(5500).hide("slide",{direction:"left"},500);
      if(count == sc){
     count = 1;
    }
    else
    {
     count=count+1;
    }
   },6500);
  }
</script>

<div class="slider">
    <img id="1" src="images/slider/slide1.jpg" border="0" alt="primeira" />
    <img id="2" src="images/slider/slide2.jpg" border="0" alt="segunda" />
    <img id="3" src="images/slider/slide3.jpg" border="0" alt="terceira" />
</div>

<style>
.slider {
    width: 800px;
    height: 349px;
    overflow:hidden;
    margin: 30px auto;
    background-image: url(images/slider/load.GIF);
    background-repeat: no-repeat;
    background-position: center;
}
.slider img {
    width: 800px;
    height: 349px;
    display: none;
}
</stile>

Answer 1

You can do the following:

var sc;
var count = 1;

$(document).ready(function() {
  sc = $(".slider img").size();
  $(".slider #1").show("fade",500);
  setInterval(function(){
    switchPanel(1);
  },5500);
  $("#prev").click(function(){switchPanel(-1)});
  $("#next").click(function(){switchPanel(1)});
});
function switchPanel(direction)
{
  var hide, show;
  if (direction == 1)
  { 
    show = "right";
    hide = "left";
  }
  else if (direction == -1)
  {
    show = "left";
    hide = "right";
  }
  $(".slider #"+count).hide("slide",{direction:hide},500);
  count = count + direction;
  if(count == sc + 1) count = 1;
  else if(count == 0) count = sc;
  $(".slider #"+count).show("slide",{direction:show},500);
}

What's left for you is to add the previous ( #prev ) and next ( #next ) buttons.

Answer 2

This should be works.

$(".slider #1").show("fade",500);
$(".slider #1").delay(5500).hide("slide",{direction:"left"},500);

var sc = $(".slider img").size();
var count = 2;
var hideImage;
var slideshow;

var slideImage = function(isNext) {
    var showDirection;

    if (isNext){
        showDirection = "right";
    } else {    
        showDirection = "left";
    }

    $(".slider #"+count).show("slide",{direction:showDirection},500);
    hideImage = setTimeout(function(){
       $(".slider #"+count).hide("slide",{direction:"left"},500); 

       count = (count+1) > sc ? 1 : count+1;
    }, 5500);   
}

// Start the slideshow
slideshow = setInterval(function(){
   slideImage(true);  
},6500);

var manualSlide = function(isNext) {
    // Stop the slideshow    
    clearTimeout(hideImage);
    clearInterval(slideshow);

    // Force hide current image 
    var hideDirection = isNext ? "left" : "right";
    $(".slider #"+count).hide("slide",{direction:hideDirection},500);

    if(isNext) {
        count = (count+1) > sc ? 1 : count+1;
    } else {
        count = (count-1) == 0 ? sc : count-1;
    }

    setTimeout(function(){
        slideImage(isNext);

        // Start the slideshow again
        slideshow = setInterval(function(){
           slideImage(true);  
        },6500);
    }, 1000);
}

$("#prev").on("click", function() { manualSlide(false); });
$("#next").on("click", function() { manualSlide(true); });

This is the result: FIDDLE

Note: I have to change delay into setTimeout because we can't cancel delay .