How to transform a Multistate box into an autoplay slide

Hello,

I was wondering if there is a way to transform a multistate box into an autoplay slide. I already know I cant do that without coding. I dont know much, only basics of coding. Could someone help me to build that?

Hi Amanda,
You will need few velo code to complete this one.

$w.onReady(function () { 
   var states = ['state1', 'state2', 'state3']; 
   var stateNumber = 0;   
 function slideShow() {        $w('#multiStateBox1').changeState(states[stateNumber]);   
     if (stateNumber < states.length - 1) {  
          stateNumber++;      
  } 
else {      
      stateNumber = 0;      
  }        
setTimeout(slideShow, 6000); 
   }  
  slideShow();
});

In this code, use the actual id of your MultiStateBox in the coding panel for this line

 $w('#multiStateBox1')

you need to change the “state1” , “state2” numbers in

var states = ['state1', 'state2', 'state3']; 

to the id of your current states (the state will be a container wrapped in your MultiStateBox) , and in

 setTimeout(slideShow, 6000);  

6000 is the millisecond delay before each slide change!
Also don’t forget to apply the animation in each items of the slide to complete the UX!
Here is the Tutorial if you’re not clear with my steps.
How to build a Slideshow with Multi State Box | Editor X - YouTube
Hope this will help you!

1 Like