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.

$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!