I have a multi-state box on my site that changes to a new state with time function every six seconds. The state can also be changed at the click of a button.
I would like to pause the time function using a hover event but I’m a little out of my depth on this one.
Is there a pause function for multi-state boxes or is there something I’m missing. Any help greatly appreciated and code below.
$w . onReady ( function () {
**var** states = [ 'state1' , 'state2' , 'state3' , 'state4' , 'state5' ,];
**var** stateNumber = 0 ;
**function** slideShow () {
$w ( '#multiStateBox1' ). changeState ( states [ stateNumber ]);
**if** ( stateNumber < states . length - 1 ) {
stateNumber ++;
} **else** {
stateNumber = 0 ;
}
setTimeout ( slideShow , 6000 );
}
slideShow ();
$w ( “#next1” ). onClick (() => {
$w ( ‘#multiStateBox1’ ). changeState ( “state2” );
} );
$w ( “#next2” ). onClick (() => {
$w ( ‘#multiStateBox1’ ). changeState ( “state3” );
} );
$w ( “#next3” ). onClick (() => {
$w ( ‘#multiStateBox1’ ). changeState ( “state4” );
} );
$w ( “#next4” ). onClick (() => {
$w ( ‘#multiStateBox1’ ). changeState ( “state5” );
} );
$w ( “#next5” ). onClick (() => {
$w ( ‘#multiStateBox1’ ). changeState ( “state1” );
} );
});