Link Button to SlideShow

Discussion Ask a question
,
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)})
}
1 Like
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 | } | ^