Here is How to move to a specific slide on button click in Wix.

Wix offers an easy-to-use tool for creating beautiful and interactive slideshows among its many features. However, one common challenge users face is moving to a specific slide within the slideshow on a button click. This blog will guide you through the steps to achieve this functionality effortlessly using simple velo code.

Prerequisite:

Before you start this tutorial, you need to create a wix website, add a slide show and buttons.

Step 1: Turn on developer mode

To configure the buttons with Velo code, we need to enable "Dev Mode".

On the top left of the window hover over Dev mode and turn on dev mode

Step 2: Giving ID to elements

For better coding standard, it is good to rename the 'id' of the elements. You can read how to give id to elements in wix our other post Step 5.

In this case, our elements are: Slideshow(slideshow2), Eat Slide Button (eatButton), Drink Slide Button (drinkButton), and Repeat Button (repeatButton).

Step 3: The code

Open the code panel from the bottom left, by clicking on the page name.

Now we are going to write the following code:

$w.onReady(function () {
        
    $w('#drinkButton').onClick(() => {
        $w('#slideshow2').changeSlide(0);
    })

    $w('#eatButton').onClick(() => {
        $w('#slideshow2').changeSlide(1);
    })

    $w('#repeatButton').onClick(() => {
        $w('#slideshow2').changeSlide(2);
    })
});

---

Now your code should look like this:

---

Step 7: Preview and Publish

On the top right side, click on "Preview" to see if your code is working. If it is working, then you can publish.

---

Additional Info

View the example website here