Navigate and Change slide with button click

Tutorial Video

This video shows how to animation effects on a Slideshow. The example shows how to display  multiple Staff or Team members information at the click of a button.  This video is new-coder-friendly. If you have NEVER tried Wix Code before, you can start with this video! Remember to join the Facebook group to participate in Facebook Live Q&A's with the Code Queen!

Join:  www.facebook.com/groups/wixcode

Follow Along #1

Tutorial Site & Other Links

Link to Tutorial Site: https://codequeen.wixsite.com/slideshow

Link to Wix API: https://www.wix.com/code/reference/$w.Slideshow.html#next

Link to Wix Article: https://www.wix.com/code/home/example/Multistage-Form

---

Follow Along #2

Code used in Tutorial Video

If you are following along to the tutorial video, remember to add or delete code as needed. The example below assumes you are using the properties panel for each element that will use the onClick event from within the properties panel. Remember that a part of the code automatically appears in the page code after clicking on the onClick event within the properties panel. (Keep reading to view alternative code if you do not want to use the properties panel.)

export function julieButton_click() {
    $w('#slideshow1').changeSlide(0);
}

export function susanButton_click() {
    $w('#slideshow1').changeSlide(1);
}

export function mikeButton_click() {
    $w('#slideshow1').changeSlide(2);
}

export function jasonButton_click() {
    $w('#slideshow1').changeSlide(3);
}

export function previousButton_click() {
    $w("#slideshow1").previous();
}

export function nextButton_click() {
    $w("#slideshow1").next();
}
        

---

Follow Along #3

Alternative Code without Properties Panel

We have found that sometimes the events coded directly from properties panel tend to randomly and mysteriously stop working. Just know there is another way of coding the onClick events. To do so, you do not add anything on the Properties Panel. Instead you would simply enter some code within the onReady function of your site. We recreated the code for the elements used in the first example code.

$w.onReady(function () {

    $w("#julieButton").onClick((event) => {
        $w('#slideshow1').changeSlide(0);
    });

    $w("#susanButton").onClick((event) => {
        $w('#slideshow1').changeSlide(1);
    });

    $w("#mikeButton").onClick((event) => {
        $w('#slideshow1').changeSlide(2);
    });

    $w("#jasonButton").onClick((event) => {
        $w('#slideshow1').changeSlide(3);
    });

    $w("#previousButton").onClick((event) => {
        $w("#slideshow1").previous();
    });

    $w("#nextButton").onClick((event) => {
        $w("#slideshow1").next();
    });

});
  

---

Author

by Code Queen

Services world wide

Stuck on a project? Hire Code Queen, LLC!

Schedule a phone call or video call directly online. In a different time zone? No problem! Code Queen currently has clients around the world.

Online Booking: Discovery Session

Contact Form: Send project details