top of page
Maveristic

Be Valuable, Not Available

How to change slide in a slideshow on button click in WIX?

Hi Guys,

I would like to share a code that will enable you to switch between slides on a button click using Velo by WIX.

It is a super useful function if you are looking at displaying a custom slide and not following the default sequence of the slideshow.

Before using the code below please make sure you disable the below characteristics from your slideshow layouts:

  1. Navigation Arrow

  2. Show Slide Buttons

  3. Autoplays on loading

Why do I need to disable the above functions?

To avoid any confusion for the visitor and to ensure the transition is as per the custom code.

Click anywhere on the slider and you will get the option

Click anywhere on the slider and you will get the option



Settings to disable autoplays on loading

Settings to disable autoplays on loading


Disable the toggle as shown above

Disable the toggle as shown above



Settings to disable navigation arrows & show slide buttons

Settings to disable navigation arrows & show slide buttons


Disable the toggle as shown above

Disable the toggle as shown above

Note: You have to activate the Dev Mode (Velo by WIX)

Please follow the below instructions to understand the logic of the code. If you are not too comfortable with the same and need to revamp the website or build one you may simply drop me an email and I will get back to you.

My full slider has 3 slides. I have inserted buttons respectively on each of the slides and have hidden the default arrows in the slider.

  1. slide3home = Home button inserted in slide 3

  2. slide3woman = Woman button inserted in slide 3

Have defined the above logic respectively in all 3 slides

The numbering for the slide to use as a reference is similar to python i.e.

  1. 0 = Slide 1

  2. 1 = Slide 2

  3. 2 = Slide 3

Depending on how many slides you have you will have to use the reference for slides starting from 0.


export function slide3home_click(event){

$w("#fullwidthSlides1").changeSlide(0)

}

export function slide3woman_click(event) {

$w("#fullWidthSlides1").changeSlide(1)

}

export function slide2man_click(event) {

$w("#fullWidthSlides1").changeSlide(2)

}

export function slide2home_click(event) {

$w("#fullWidthSlides1").changeSlide(0)

}

export function slide1woman_click(event) {

$w("#fullWidthSlides1").changeSlide(1)

}

export function slide1man_click(event) {

$w("#fullWidthSlides1").changeSlide(2)

}


Happy coding!

905 views0 comments

Comments