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:
Navigation Arrow
Show Slide Buttons
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
Settings to disable autoplays on loading
Disable the toggle as shown above
Settings to disable navigation arrows & show slide buttons
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.
slide3home = Home button inserted in slide 3
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.
0 = Slide 1
1 = Slide 2
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!
You can view the same here: https://maveristic.wixsite.com/designerclothes
