javascript - Next/Prev Button "stopper". Set min and max. value -

javascript - Next/Prev Button "stopper". Set min and max. value -

this script:

$(document).ready(function(){ $("#content span").html(i)/55; var = 1; $("#n_next").click(function(){ i++; $("#content span").html(i)/55; var srcbefore='img/zeitvergleich/belgien/'+i+'/before.jpg'; var srcafter="img/zeitvergleich/belgien/"+i+"/after.jpg"; $("#changer1").attr("src",srcbefore); $("#changer2").attr("src",srcafter); console.log(srcbefore+"::"+srcafter); }); $("#n_prev").click(function(){ i--; $("#content span").html(i)/55; var srcbefore='img/zeitvergleich/belgien/'+i+'/before.jpg'; var srcafter="img/zeitvergleich/belgien/"+i+"/after.jpg"; $("#changer1").attr("src",srcbefore); $("#changer2").attr("src",srcafter); console.log(srcbefore+"::"+srcafter); }); }); <div><img id="changer1" alt="before" src="img/zeitvergleich/belgien/1/before.jpg" width="540" height="360" /> <img id="changer2" alt="after" src="img/zeitvergleich/belgien/1/after.jpg" width="540" height="360" /> <div style="float:right" id="content"><span>1</span>/55</div> <img src="img/prev.png" id="n_prev"/>&nbsp;&nbsp;<img src="img/trnn.png"/>&nbsp;&nbsp;<img src="img/next.png" id="n_next"/>

so folder alter on click. when next button +1 , prev button -1. works perfect. there 1 little problem. counter can go -numbers , on 55... can help me create kind of "stopper" min. 1 , max. 55?

use simple if

if(i<55){

and

if(i>1){

like :

$(document).ready(function(){ $("#content span").html(i)/55; var = 1; $("#n_next").click(function(){ if(i<5){ i++; $("#content span").html(i)/55; var srcbefore='img/zeitvergleich/belgien/'+i+'/before.jpg'; var srcafter="img/zeitvergleich/belgien/"+i+"/after.jpg"; $("#changer1").attr("src",srcbefore); $("#changer2").attr("src",srcafter); console.log(srcbefore+"::"+srcafter); } }); $("#n_prev").click(function(){ if(i>1){ i--; $("#content span").html(i)/55; var srcbefore='img/zeitvergleich/belgien/'+i+'/before.jpg'; var srcafter="img/zeitvergleich/belgien/"+i+"/after.jpg"; $("#changer1").attr("src",srcbefore); $("#changer2").attr("src",srcafter); console.log(srcbefore+"::"+srcafter); } }); });

javascript