Previous and Next Buttons

I have manage thus far for programming a next and previous button but it seems quirky. Sometimes it behaves erratically. Can someone lend a hand to identify the issue? The issue is specilly troublesome in when I use the first slide button and last slide button which have the follwong code

FIRST SLIDE BUTTON: sym.stop("TITLE");

LAST LIDE BUTTON: sym.stop("SUMMARY");

$("#Stage").css("margin","auto")

/////////////////////////

var myArray = [

{'myLabel':'TITTLE'},

{'myLabel':'OBJECTIVES'},

{'myLabel':'SLIDE1'},

{'myLabel':'SLIDE2'},

{'myLabel':'SLIDE3'},

{'myLabel':'SLIDE4'},

{'myLabel':'SLIDE5'},

{'myLabel':'SLIDE6'},

{'myLabel':'SLIDE7'},

{'myLabel':'SLIDE8'},

{'myLabel':'SLIDE9'},

{'myLabel':'SUMMARY'}

]

////////////////////////////////////////////////////

i=0;

///////////////////////////////////////////////////

sym.$('NEXTSLIDE_BTN').click(function(){

                    i++;

     if (i<myArray.length){    

                    sym.play(myArray[i].myLabel);

     } else {

                    i=myArray.length-1;

     }

});

///////////////////////////////////////////////////

sym.$('PREVIOUSSLIDE_BTN').click(function(){

          sym.playReverse();

          i=0;

});

Thanks for any help.