Can't nest slideshow without breaking it

I just want to say that coming from Flash I find Edge Animate frustrating.

I found this slideshow tutorial that uses the following code on Creation Complete on the stage

http://designupdate.com/blog/2013/07/23/how-to-create-a-slideshow-in-edge-animate/comment- page-1/

var imageCount = 1;

var numOfPhotos = 7;

sym.$("textTotal").html("of " + numOfPhotos);

sym.showPhoto = function (photoDirection){

  imageCount = imageCount + photoDirection;

  //Beyond 22, change to 1

  if (imageCount > numOfPhotos){ imageCount = 1};

  //Less than 1, change to the very last photo

  if (imageCount < 1){ imageCount = numOfPhotos};

  //Change the text number to the current photo

  sym.$("textCount").html(imageCount);

     //Fade out the current photo

     sym.$('mainPhoto').fadeOut('slow', function() {

          //Set the attribute to the correct photo

          sym.$("mainPhoto").attr('src', 'images/photo_'+imageCount + '.jpg');

          sym.$("mainPhoto").load(function () {

          //Fade in the new photo

          sym.$('mainPhoto').fadeIn('slow');

          });

     });

}

For my purpose, I have to use a template that shows one of 3 different symbol sizes, based on a user's view port. Nothing I have tried, does not break the functionality of the arrow images swapping images. ThoughI am getting a cursor.

I have tried the stage, inside one of the symbols, and converting it to a symbol, both on the stage and inside one of the symbols.

The arrow buttons have this code

sym.getComposition().getStage().showPhoto(-1);

Any suggestions welcome.