Link Button to SlideShow

Ask the community
,
1

I’ve created a slideshow with 3 slides. Additionally i’ve put in place 3 buttons overtop of it.

What i’m trying to do is link each button to a slide. For example when you click the first button it brings the slideshow to slide1, and when you press the second button it brings the slideshow to slide2… and you can continue to alternate between each slide this way.

Here’s my code.
export function button52_click() { // This function was added from the Properties & Events panel. To learn more, visit Velo: Working with the Properties & Events Panel | Help Center | Wix.com // Add your code for this event here:
$w.onReady(() => {
$w( " #button53 " ).onClick ? $w( " #fullWidthSlides1 " )
})
}

export function button53_click() { // This function was added from the Properties & Events panel. To learn more, visit Velo: Working with the Properties & Events Panel | Help Center | Wix.com // Add your code for this event here:
$w.onReady(() => {
$w( " #button5 2" ).onClick(event => {
$w( " #button5 2" ).onClick ? $w( " #fullWidthSlides2 " )
})
}

export function button54_click() { // This function was added from the Properties & Events panel. To learn more, visit Velo: Working with the Properties & Events Panel | Help Center | Wix.com // Add your code for this event here:
$w.onReady(() => {
$w( " #button5 4" ).onClick(event => {
$w( " #button5 4" ).onClick ? $w( " #fullWidthSlides 3" )
})
}

2

This can be helpful → 

$w("#mySlideshow").changeSlide(2);

If passing a number, note that slide indices in a slideshow are zero-based, even though they are numbered starting from 1 in the Editor.

Reference - https://www.wix.com/corvid/reference/$w/slideshow/changeslide

3

Hello, here is my code now. Still not working

$w.onReady(() => { $w( “#button54” ).onClick(event => {
$w( “#button54” ).onClick ? $w( “#fullWidthSlides2” ).changeSlide( 1 )
})
}

$w.onReady(() => { $w( “#button56” ).onClick(event => {
$w( “#button56” ).onClick ? $w( “#fullWidthSlides2” ).changeSlide( 2 )
})
}

$w.onReady(() => { $w( “#button55” ).onClick(event => {
$w( “#button55” ).onClick ? $w( “#fullWidthSlides2” ).changeSlide( 3 )
})
}

4

@pierredalati

$w.onReady(() => { $w("#button54").onClick(event => {  
    $w("#button54").onClick(()=> {$w("#fullWidthSlides2").changeSlide(1)}) 
    $w("#button56").onClick(()=> {$w("#fullWidthSlides2").changeSlide(2)})
    $w("#button55").onClick(()=> {$w("#fullWidthSlides2").changeSlide(3)})
}
5

Hello, is anyone able to offer some advice on getting this code to work. I’m definitely not a coder and am trying to follow along the steps above but it keeps erroring (invalid token)

I’m trying to control a slideshow with 3 buttons that are linked to a specific slide.

Any help is much appreciated!

$w . onReady ( function () {
$w . onReady (() => { $w ( “#button10” ). onClick ( event => { } )
$w ( “#button10” ). onClick (()=> { $w ( “#slideshowSlide1” )})
$w ( “#button11” ). onClick (()=> { $w ( “#slideshowSlide2” )})
$w ( “#button12” ). onClick (()=> { $w ( “#slideshowSlide3” )})
}

error:
public/pages/x5tg9.js: Unexpected token, expected “,” (9:1) 7 | $w(“#button11”).onClick(()=> {$w(“#slideshowSlide2”)}) 8 | $w(“#button12”).onClick(()=> {$w(“#slideshowSlide3”)}) > 9 | } | ^

6

Here is the code I used that worked (put your unique button / slideshow ID where the underscores are):
$w(“#button_”).onClick(() => {
$w(‘#slideshow_’).changeSlide(_);
})

I’m having an issue I wonder if yall can help me with though.
While my buttons work, they disappear when I switch to a different slide as though they are attached to Slide 1. I’ve tried rearranging them in the layers panel, but it won’t let me move them to a different layer so that they are still seen even when the slide switches.
Can anyone help?