Open Site Navigation

Automated Slideshow in Editor X

In this lesson, we will be using Multi-State Boxes to create an automated slideshow. Have a custom slideshow that automatically go through the slides without then need for users to press buttons.


Editor X: Automatic Slideshow

Before you copy the code, we suggest you watch our video to make sure that you set up your slideshow correctly on your website:


 

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

 

In order for this code to work, you must make sure you either change the name of your multi-state box to "multistatebox1" or change the code to match what name you have given the element. Same goes for the states in your multi-state box.


Have fun!


If you need assistance with setting up your Velo code, then we can help you out! Just click here to receive help.