top of page
Writer's pictureCD Studio .

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

Updated: Jul 24, 2023

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.


 
Dev Mode Menu in Wix

 




 
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?















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.


velo code to change 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

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.



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.

50 views1 comment

Recent Posts

See All

1 Comment


Roberto Kja
Roberto Kja
Sep 27

For the last few years, I’ve noticed my skin aging faster than I expected, with more wrinkles and dullness creeping in. I’ve always thought HRT was just for managing menopause symptoms, but recently, I discovered it might also help improve your appearance. I found this article that breaks down whether hormone replacement therapy can actually make you look younger: https://ways2well.com/blog/does-hormone-replacement-therapy-make-you-look-younger. It discusses how hormones play a role in skin health and how HRT might be able to boost collagen and skin hydration, making it worth exploring further.

Like
bottom of page