top of page

Custom Slideshow with Multi-State Boxes

May 10, 2024
1 min read

Updated: Dec 30, 2024



Velo Code:


$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');
});
});

Enjoy!

1 Comment


When you need a simple, small-scale MySQL database, the details matter. This page provides a clear breakdown of two specific services, focusing on the version of MySQL they run and the space they offer. That's exactly the information you need to make a quick decision without having to visit each provider's site. The write-up is straightforward and avoids getting into unnecessary complexity. For a quick check of the essentials, this look at the two providers gives you the key facts.

Like
bottom of page