Question

I am trying to make a prensentation using jquery but the next button is working fine but the back button is not working as i expected please help me to fix this. thanks in advance.

i have tried here

here is my html code:

<div id="slider">
<div id="next">Next</div>
<div id="prev">Back</div>
<div class="slide s1">I'm slide 1</div>
<div class="slide s2">I'm slide 2</div>
<div class="slide s3">I'm slide 3</div>

​

here is my script:

var c=0;
var b=3;
$('.slide:gt(0)').hide();
$('#next').click(function(){
c++;
$('.slide').eq(c).css({zIndex : c}).show('slow');
});
$('#prev').click(function(){
b--;
$('.slide').eq(c).css({zIndex : b}).show('slow');
});​

Answer 1

You didn’t keep track of your slides properly. You don’t need two indexes, just show a new slide on top of the others when the user clicks next, and hide the top slide when the user clicks back.

Like this:

var c=0;
$('.slide:gt(0)').hide();
$('#next').click(function(){
    if(c < $('.slide').size()-1) c++;
    $('.slide').eq(c).css({zIndex : c}).show('slow');
});
$('#prev').click(function(){
    if(c>0){
        $('.slide').eq(c).css({zIndex : c}).hide('slow');
        c--;
    }
});​

See this fiddle (UPDATED TO WORK FOR UNDETERMINED NR OF SLIDES)