Here's How to change slide on button click in Wix

Wix provides default navigation arrows to switch between slides, you may want to customize the buttons to match your website's design and style. In this blog post, we will guide you through the process of changing slides with custom buttons in Wix, enabling you to have complete control over your website's slideshow.

Wix Slide show with Custom button to change slide

Step 1: Accessing the Wix Editor

To begin customizing your slide show in Wix, log in to your Wix account and navigate to the Editor. Once you're in the Editor, select the page where your slide show is located.

Step 2: Adding a Slide Show

If you don't have a slide show on your page yet, you can add one by clicking on the "Add" button in the left-hand sidebar and selecting "Slideshow" from "Interactive". Choose the desired layout and style for your slide show, and position it on the page.

Step 3: Adding Custom Buttons

Add Buttons. Place the buttons on your page where you want them to appear in relation to the slide show.

Step 4: Turn on Developer mode

To configure the buttons, we need to enable "Dev Mode" in order to write a few lines of simple code.

---

On the top left of the window hover over Dev mode.

---

Then click on Turn on Developer Mode

---

Step 5: Giving ID to elements

For better coding standard, it is good to rename the 'id' of the elements, in this case our elements are: Slideshow, Previous Button and Next Button. As shown below

How to change id of an element in wix?

After you enabled the dev mode, click on the bottom left tab to open code panel (as shown in image).

It should open like this, and on the right side you can set id for any clicked element

Step 6: The code

On the left side of where you renamed the id, you can see the code panel. This is where we are going to write the code to change the slide on button click in Wix.

Type the code in the panel as shown in the image and down below.

$w.onReady(function () {

    $w('#prevSlideButton').onClick(()=>{
    $w('#slideshow1').previous();
    })

    $w('#nextSlideButton').onClick(()=>{
    $w('#slideshow1').next();
    })
});

Step 7: Preview

On the top right side, click on "Preview" to see if your code is working.

---

Additional Info

View the example website

You can also set individual button to switch to a specific slide say a button to take you to 3rd slide directly. The tutorial for it is here. Subscribe to read all our blogs first.

View example.

Here's velo reference for slideshow element

If you find any difficulty contact us. CD Studio is a wix legend partner and will be able to help you out.

---

Bonus

If you want, you can turn off the auto play of slides by clicking the slideshow element > Settings icon > Turn off autoplay on loading.

Additionally you can hide all the default navigation buttons in the slide by clicking on the Slide show element, then find layout button (shown in image)

Then, turn off navigation arrows and slide buttons as you like.

Thankyou for reading.