Custom Slideshow with Multi-State Boxes in Editor X

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.

---

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