Как добавить предыдущую и следующую кнопку в код слайд-шоу JQuery

Question

У меня есть код jQuery для слайд-шоу ниже. Он отлично работает в проекте, над которым я сейчас работаю. Хотя, я бы хотел реализовать предыдущую и следующую кнопку в том же коде, если это возможно. Любая помощь могла бы быть полезна.

<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

Вы можете сделать следующее:

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); 
} 

То, что осталось для вас, чтобы добавить кнопки предыдущие (#prev) и следующая (#next).

Answer 2

Это должны быть работы.

$(".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); }); 

Это результат: FIDDLE

Примечание: Я должен изменить delay в setTimeout, потому что мы не можем отменить delay.