Switch Code

Ask the community
,
1

Hello,

I’m trying to include a switch on my website so that when I enable it, it changes my interactive strip to the next slide and then when I switch it back, the interactive strip changes back to the original slide.

Anyone know the appropriate code for this?

2

What is " interactive strip" ? Are you talking about slideshow?

3

Yes a slideshow

4

So add an onChange() event listener to the switch in order to detect the change:
https://www.wix.com/corvid/reference/$w/switch/onchange
In the event handler check if it’s “checked” or not:
https://www.wix.com/corvid/reference/$w/switch/checked

Based on the value, change to specific slide:
https://www.wix.com/corvid/reference/$w/slideshow/changeslide

Or move to next/previous:
https://www.wix.com/corvid/reference/$w/slideshow/next
https://www.wix.com/corvid/reference/$w/slideshow/previous

For example:

$w.onReady(() => {
$w("#switch1").onChange(event => {
$w("#switch1").checked ? $w("#slideshow").next() : $w("#slideshow").previous();
})
})
5

@jonatandor35 Here’s what I put in, but it doesn’t seem to be working. I’m new to this coding stuff lol

6

@pierredalati don’t put it inside the switch1_click function.

7

@jonatandor35 Here’s what I did however it’s still not switching the slides when I click the switch

8

@pierredalati don’t put the code inside the switch1_click function.
(+ from now on please copy&paste your code and don’t attach a screenshot with the code. It’s easier this way).

9

@jonatandor35 Here’s the code I have now. It’s working to the extend where when I press the switch, it switches the slide… however I want the first slide to be associated with the switch being on, and the 2nd slide being associated to the switch being off.

export function switch1_change() { // 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( " #switch1 " ).onChange(event => { $w( " #switch1 " ).checked ? $w( " #fullWidthSlides2 " ).next() : $w( " #fullWidthSlides2 " ).previous(); }) }) }

10

@jonatandor35 It also requires me to press the switch twice in order for it to start switching slides. How can I fix those 2 things?

11

@pierredalati delete the red parts:

export function switch1_change() {// This function was added from the Properties & Events panel. To learn more, visit http://wix.to/UcBnC-4// Add your code for this event here:  
$w.onReady(() => {$w("#switch1").onChange(event => {$w("#switch1").checked ? $w("#fullWidthSlides2").next() : $w("#fullWidthSlides2").previous();})})}//<<<
12

@jonatandor35 I’ve decided it’s better to set it up with 2 buttons.

I’ve created a slideshow with 2 slides. Additionally i’ve put in place 2 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( “#button53” ).onClick(event => {
$w( “#button53” ).onClick ? $w( “#fullWidthSlides2” )
})
}

13

@pierredalati see my previous comment

14

Hey man thanks for all the help! I got the switch to work. I’m now looking to do the same however with buttons.

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" )
})
}