Learn how to create a custom slideshow in your Editor X website with Multi-State Boxes and a bit of Velo. UPDATE: You can create a pretty simple slideshow with Layouters in Editor X. This tutorial will still be useful if you want your slideshow to be a bit more customized.
Before we add the code, I highly suggest watching our video to see how we set up our Multi-State Boxes and Velo code:
Now that you have set up your Multi-State Box and the content inside, you can use the code below to make it work.
$w.onReady(function () { //STATE 1 $w('#s1b1').onClick(() => { $w('#multiStateBox1').changeState('four'); }); $w('#s1b2').onClick(() => { $w('#multiStateBox1').changeState('two'); }); $w('#s1s2').onClick(() => { $w('#multiStateBox1').changeState('two'); }); $w('#s1s3').onClick(() => { $w('#multiStateBox1').changeState('three'); }); $w('#s1s4').onClick(() => { $w('#multiStateBox1').changeState('four'); }); //STATE 2 $w('#s2b1').onClick(() => { $w('#multiStateBox1').changeState('one'); }); $w('#s2b2').onClick(() => { $w('#multiStateBox1').changeState('three'); }); $w('#s2s1').onClick(() => { $w('#multiStateBox1').changeState('one'); }); $w('#s2s3').onClick(() => { $w('#multiStateBox1').changeState('three'); }); $w('#s2s4').onClick(() => { $w('#multiStateBox1').changeState('four'); }); //STATE 3 $w('#s3b1').onClick(() => { $w('#multiStateBox1').changeState('two'); }); $w('#s3b2').onClick(() => { $w('#multiStateBox1').changeState('four'); }); $w('#s3s1').onClick(() => { $w('#multiStateBox1').changeState('one'); }); $w('#s3s2').onClick(() => { $w('#multiStateBox1').changeState('two'); }); $w('#s3s4').onClick(() => { $w('#multiStateBox1').changeState('four'); }); //STATE 4 $w('#s4b1').onClick(() => { $w('#multiStateBox1').changeState('three'); }); $w('#s4b2').onClick(() => { $w('#multiStateBox1').changeState('one'); }); $w('#s4s1').onClick(() => { $w('#multiStateBox1').changeState('one'); }); $w('#s4s2').onClick(() => { $w('#multiStateBox1').changeState('two'); }); $w('#s4s3').onClick(() => { $w('#multiStateBox1').changeState('three'); }); });
Remember to change the name of the buttons/icons to match code or visa versa. Also, if you have more slides that you want to add in your slideshow, then just duplicate the code and change the code.
Enjoy!
Still having issues? Feel free to reach out and we can assist you!