Buttons Left/Right for slideshow

Question

Hi.
I have this slideshow and I need the code for the Left and Right buttons. The problem is that every symbol (slideshow elements) on the slideshow have their own fade-in and fade out. When I click the Left/Right buttons they must play the fade-out of the symbol presently showing and the fade-in from the symbol that follows. I tried to adapt the code from this other post that TimJaramillo is helping me with but... I'm not a Javascript/JQuery savy and it's not a straightforward thing.
Here's the code they I've been trying to adapt:
// Section options settings
// Setting variables and arrays
var currentOption = null; // Index in array_options: 0=a, 1=b, 2=c, 3=d
var requestOption; // Index in array_options: 0=a, 1=b, 2=c, 3=d
var array_options = ["option1a_venhoDeOutraIgreja", "option1b_sintoMePerdido","option1c_queroConhecerEsseJesus", "option1d_naoAcreditoEmDeus"];
var array_optionsBtns = ["sectionOption1a_Btn_venhoDeOutraIgreja", "sectionOption1b_Btn_sintoMePerdido", "sectionOption1c_Btn_queroConhecerEsseJesus", "sectionOption1d_Btn_naoAcreditoEmDeus"]
// Called by timeline.complete/timeline.speclocation event at end of each Option
sym.playRequest = function(){
  sym.getSymbol(array_options[requestOption]).play("lead_in");
  currentOption = requestOption;
// Called on button click
sym.btnClick = function(request) {
  requestOption = request;
  if(currentOption !=null){
    sym.getSymbol(array_options[currentOption]).play("lead_out");
    sym.getSymbol(array_optionsBtns[currentOption]).play('option_exit');
  else{
    sym.playRequest();
Stage / compositionReady
sym.getComposition().getStage().playRequest();
Symbols with fade-in/fade-out —» Default timeline / complete
sym.getComposition().getStage().btnClick(0,1,2,3); // 0,1,2,3 index of array = a,b,c,d
Buttons —» Click
I also need that, the first time the slideshow appears, it plays the first item automatically (only the 1st one).
And here's a schematic of what I want:
And my Edge project files ZIP.
Pedro

Answer 1

Hi Pedro,
Edit: I just saw that you want the first slide to autoplay. You should be able to tweak my code to make this happen. If not let me know. I also just saw that you want the slideshow to loop after the user gets to the far right. This is a simple tweak as well. Let me know if you need help with this.
Here is a working example for you. Click on the right arrow to show the first slide. Then click left or right to show prev/next slides.
www.timjaramillo.com/code/edge/pedro_test/option2b_quemTrabalha.html
Source:
www.timjaramillo.com/code/edge/_source/pedro_test.zip
Most of the code is similar to a simple image gallery. But since you want to wait for outro animations to finish, it's a little trickier. I had to add vars to track request, and current anims.
Stage.compositionReady code pasted below:
// vars -----------------------------------------
         // Section options settings
         // Setting variables and arrays
         var currentOption = null; // Index in array_options: 0=a, 1=b, 2=c, 3=d
         var requestOption; // Index in array_options: 0=a, 1=b, 2=c, 3=d
         var array_options = ["option2b_quemTrabalha_1_presbiterio", "option2b_quemTrabalha_2_musica", "option2b_quemTrabalha_3_multimedia"];
         var array_optionsBtns = ["sectionOptions_article_SlideBtnRight", "sectionOptions_article_SlideBtnLeft"]
         var trackIndex = null;
         // funcs -----------------------------------------
         sym.onClickLeft = function() {
                   if( trackIndex >= 1 ){
                             trackIndex--;// decrement index
                             sym.initArticle(trackIndex);
         sym.onClickRight = function() {
                   // first time
                   if( trackIndex == null ){
                             // init first obj (array index starts at 0)
                             trackIndex = 0;
                             sym.initArticle(trackIndex);
                   }else          if( trackIndex < array_options.length-1 ){  
                             trackIndex++;// increment index
                             sym.initArticle(trackIndex);
         sym.initArticle = function(request) {
           requestOption = request;
           if(currentOption !=null){
             sym.getSymbol("option2b_quemTrabalha").getSymbol(array_options[currentOption] ).play("lead_out_from_left");
           else{
             sym.playRequest();
         // Called by timeline.complete/timeline.speclocation event at end of each Option
         sym.playRequest = function(){
                               sym.getSymbol("option2b_quemTrabalha").getSymbol(array_options[requestOption] ).play("lead_in_from_left");
                               currentOption = requestOption;