How to click between slides by clicking my own button

Discussion Ask a question
,
1

I am trying to figure out how (through wix code) that when I have the slide buttons disabled how can I add my own button that links to a specific slide. (i.e. When I click my button on slide 3, it links to slide 5?
Your help would be appreciated

2

Hay Croberts,

I guess you are using the slideshow? If so, it has an API to move to a specific slide - the changeSlide API.

Have a button click event calling this API. To move to slide 5, the code will look something like the following (note that slide indexes are 0 based, so slide 5 is number 4) -


export function BUTTON1_click() {
  $w('#SLIDESHOW1').changeSlide(4);
}
2 Likes
3

Yoav,

Thanks for your response. I tried this but it is not working. I have changed the ID of the slideshow to match my own ID and the slide numbers but still no luck? Is there any settings?

4

Hi crobert,

Can you please share your code for the click function?

Liran.

1 Like
5

export function Nextbutton_click($w) {
$w(“#mySlideshow”).changeSlide(0)

6

Hi,

Have you added the click event from the properties panel ?
See more here

1 Like
7

I have it! - thanks for the help. The code has to remove the $w in the brackets after the export function click - See below

export function Nextbutton_click() {
$w(“#mySlideshow”).changeSlide(0)

8

I also have to say thank you very much because I used this code to make what I always wanted to make and no vendor has it - to have a nice described, pictured and highlighted buttons connected to the slides.
But for now I have to multiply the number of buttons bar (the slideshow menu) to have the actual button highlighted. I would like to have only one bar and when the actual slide comes in - the corresponding button gets highlighted. Any ideas please ? :slight_smile:

9

I am not sure if this thread is still active but I suppose this solution can be useful for someone trying to do the same. Thus posted it here.

You can use the below code for performing the captioned task.

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 slide to use as 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 )
}

You can view the same here: https://maveristic.wixsite.com/designerclothes