On button click - slide changes

Ask the community
,
1

I was wondering how to do this - if i have a number of buttons and i want that each click on the button will be connected to a cetain slide from a slide show which appears near the list.
mean every click on the button will move the slideshow to the relevant slide.
Is there any example of how to do it ?

Thanks!

2

Hi,
You can use a Slideshow element, and for each button click event, use changeSlide() to set the relevant slide.

3

Hi Ohad, thanks , do you have any example for this ? \

4

You should use a Slideshow element (found under “Interactive” section in the editor add panel), set the slides’ content and then, add a click event for your buttons, and add the code to handle the click. something like:

export function button1_click(event) {
    $w("#mySlideshow").changeSlide(2);
}
5

Thanks Ohad! Finally i’ve manage to create something that works using wix code…!

6

HI!, So, I am trying to use this exact code, but it is reporting an error:

Wix code SDK error: The "slideInfo" parameter that is passed to the  "changeSlide" method cannot be set to the value 2. It must be a slide  from the "BGC" slideshow or an index between 0 and 1

code:

export function button1_click(event) {
    $w('#BGC').changeSlide(2)
}

can you help me figure out?

7

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