How to transform a Multistate box into an autoplay slide

Ask the community
,
1

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?

3

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!

2 Likes
4

Thank you! It played out just the way I wanted!

1 Like
5

Hello Aquarius,

I need a little help to reset the slide. For example, if I click in one state the slide starts from that point on, instead of keep playing from the start.
https://amandaborgescb.wixstudio.io/website-4
Thats my website ! Is the first one I created.

6 
$w.onReady(function () { 
	const states = ['state1', 'state2', 'state3']; 
	let currentSlide = 0;   
	run_slideShow(currentSlide, states);
	$w('#myButton').onClick(()=>{
		currentSlide = $w('#multiStateBox1').currentState;
    run_slideShow(currentSlide, states)
  });
});


function run_slideShow(slide, states) { 
  $w('#multiStateBox1').changeState(states[slide]);   
  if (slide < states.length-1) {slide++;} 
  else {slide = 0;}        
  setTimeout(run_slideShow, 6000); 
}
1 Like
7

Thank you.

The code isnt working, I made the adjustments to the id. The part of

     $w('#myButton').onClick(()=>{
	 *currentSlide* = $w('#multiStateBox1').currentState;
     run_slideShow(currentSlide, states)

Do I need to repeat to each button to run the slide from that point on ?
and an error keeps showing. The currentSlide ( TYPE ‘STATE’ IS NOT ASSIGNABLE TO TYPE ‘NUMBER’)

8

Here a little present from me for you… :rofl:

Delete your old code and replace trough …

let slideShowTimeout = null; // Variable to store the timeout ID

//########################### USER-INTERFACE ##############################################
var msbID = 'multiStateBox1';	// --> Your Multi-State-Box-ID here.
var slideTimer = 3; 			// --> Sliding-Timer to switch to next slide in seconds.
var buttonIDs = ['#btn1', '#btn2', '#btn3']
//########################### USER-INTERFACE ##############################################


$w.onReady(() => {
	const states = $w('#'+msbID).states; console.log('States: ', states);
	const statesTotal = states.length; console.log('States-Total: ', statesTotal);
	let currentState = $w('#'+msbID).currentState; console.log('Current-State: ', currentState);
	startSlideShow(states, statesTotal, currentState);
	buttonIDs.forEach(buttonID => {
		$w(buttonID).onClick((event) => {
			stopSlideShow();
			$w('#' + msbID).changeState(event.target.label);
			currentState = $w('#' + msbID).currentState;
			startSlideShow(states, statesTotal, currentState);
		});
	});
});

function stopSlideShow() {
	if (slideShowTimeout) {
		clearTimeout(slideShowTimeout); // Clear any existing timeout
		slideShowTimeout = null; // Reset the timeout variable
	}
}

function startSlideShow(states, statesTotal, currentState) {stopSlideShow(); 
	const slideShow=()=> {
		let currentStateID = currentState.id.trim(); console.log('Current-State-ID: ', currentStateID);
		let currentIndex = states.findIndex(state => state.id.trim() === currentStateID); console.log('Current-State-Index: ', currentIndex);
		if (currentIndex === -1) {console.error('State not found!'); return;}
		$w('#'+msbID).changeState(states[currentIndex]);
		if (currentIndex < statesTotal-1) {currentIndex++;} else {currentIndex = 0;}
		currentState = states[currentIndex];
		slideShowTimeout = setTimeout(slideShow, (slideTimer*1000)); 
	}; slideShow(); // Start the slide show
}

This code will do everything automatically.

All you will have to do are 2-things.

1) Seting up the USER-INTERFACE with right values.
You will find the USER-INTERFACE intergrated inside the provided code.

2) Giving your buttons the right labels.
The code will check for the LABELS of your buttons to navigate trough your MSB (Multi-State-Box).

Just paste the code in + do this 2 setups.
It doesn’t matter where you place your buttons, or which IDs you give them, but important is, that each button-LABEL → represents an ID of one of the MSB-States.

Have fun!

To prove the functionality → take a look here onto the following example …
https://russian-dima.wixstudio.io/test-site-repeater/blank-2

AND DO NOT TOUCH THE CODE ITSELF → YOU DO ALL SETUP INSIDE → USER-INTERFACE ← ONLY

1 Like
9

I CAN’T THANK YOU ENOUGH!!
I wouldn’t be able to create that at all!
Thank you for your help!
Do you teach coding too ? If you have a course for beginners or recommend one, I would do it! I’m new to this.
:smiling_face_with_three_hearts: :smiling_face_with_three_hearts:

1 Like
10

I will think about, to create a course or something similar.

I can train, but never trought about yet. I will check and let you know.

Have fun with the CODE. :wink:

Issue → RESOLVED ?