Play Video

Create Animated Index on Wix (Tabs, Sub Categories, Slideshows)

This video shows how to create animated index on Wix by using a Slideshow and a few buttons. The example shows how to display multiple Staff or Team members information at the click of a button. Many websites like to have ‘sub categories’ on a page to organize their information into groups or sections without having to redirect a website visitor to another page. This type of design is very popular in the form of ‘tabs’ or ‘folder view’ where you click on a button and the content switches out while also highlighting that button with a different color.

This video is new-coder-friendly. If you have NEVER tried Wix Code before, you can start with this video!

These are the links you will need to follow the Code Queen video:

Link to Tutorial Site: https://codequeen.wixsite.com/slideshow
Link to Code: https://www.totallycodable.com/post/navigate-and-change-slide-with-button-click
Link to Wix API: https://www.wix.com/code/reference/$w.Slideshow.html#next
Link to Article: https://www.wix.com/code/home/example/Multistage-Form

—————————————-

Remember to join the Facebook group to participate in Facebook Live Q&A’s with the Code Queen!

Join: www.facebook.com/groups/wixcode
Website: www.totallycodable.com
Designers: www.totallycodable.com/forum/featured-designers
Coders: www.totallycodable.com/forum/featured-coders

Hire Code Queen: www.mycodequeen.com
Donate: https://www.paypal.me/mycodequeen

——————–

Totally Codable Logo by: https://www.mattlowedesign.co.uk
Code Queen logo by: https://www.wix.com/arena/wix-expert/sissi-wedgwood/portfolio

Video Intro by: Code Queen

hello everyone Coquina le in this tutorial I’m going to show you how to use Wix code to perform a few really nice animation design effects by using some buttons and a slideshow kind of like this very nice right this example is displaying staff and team members you can use your creativity and use the slideshow to display anything else products maybe you’re renting some houses and things like that these are individual buttons for the individual
names of these people but I also have some other buttons at the bottom to show you a different way maybe you want just a previous the next and these buttons do that as well if this is your first time coding it is completely fine this video is for you too don’t worry if you can’t see the screen if you’re watching the video on your desktop on your computer if you look at the description of any of my videos you will see a button that says show more
click on that so it can expand and give you more information these are the links that you need to use depending which video you’re watching to access either the articles or the tutorial side or the codes whatever it is that’s relevant to that specific video it will be in the description so click on that that way you can follow along while you have those different articles and tabs open all right let’s go back so this is the live site on the site
I have the example here which you can actually play around with it so you can test it out yourself then I explain step by step everything that you need to do to accomplish exactly this it doesn’t have to look this way this is just the way that I designed it so first you’re going to prepare your for example the slide show by clicking on the menu so inside of your Wix editor you’re gonna click on the little plus sign look for interactive under this
section you will find the box slideshows there’s the more slide shows at the top they’re fooled with if you want to use those you can go ahead and select those but for this tutorial I’m using the Box slideshows there are a lot smaller then after you select your slideshow design it any way you like click on it delete the slides that are already there start from scratch with a white clean slate you can add new slides you could duplicate ones that
you’ve already made you can manage them here change the slide background and go through all the settings after you’re done designing your slideshow then you can add the buttons now remember I showed you two different sets of buttons this set which are individual for every single slide that I have in this slideshow and the previous and next button so figure out what your setup is gonna look like and then add the relevant buttons how do you have
the buttons go to the plus sign find button and add any button that you want and do the same thing design and style it the way that you like change the text manage the font size align it any way you want I did a previous in next I actually aligned this button to the right and this button to the left that way they could be closer to each other and then I just added a little line here so I just showed you how to add the slideshow and the buttons of
course you can add other elements as well like a picture or maybe another box with some text a title an image anything that you want so continue the design by adding the other elements to perform this design animation you at least need the slideshow and the buttons now that you’ve already prepared those two we can go ahead and turn on the developer tools so at the top look for the word code and turn them on now you’re gonna start coding if this
is your first time don’t worry I promise it’s easy after you turn on the developer tools you’re gonna go to the Tools menu and then find the properties panel make sure that this is turned on go ahead and click that checkmark now that we’ve turned on the properties panel we have to go back and each element that we added the buttons the slideshow although those are really important and we want to rename them right now if you click on any of those
buttons it’ll have a name like dollar sign dollar sign it’ll have a name like hashtag button one button to button three and so on so we want to click on the button and then you’re gonna see this properties panel pop up here under ID you’re gonna type in whatever other name you want you want to change it at least I recommend you do because it’ll be easier to identify at the bottom of the page where the code is being added if we didn’t change the
names of the buttons and we wouldn’t know what button belongs to which slide this button I named it Jason button with a capital B it’s important to remember capitalization of every single letter because it has to be written exactly the same in the code as well so go through every single button and label it the way that you want then on every button again after you’ve labeled it and renamed it you’re gonna hover over the events towards the bottom
you’re gonna see one that says on click click on that little plus sign some words will automatically appear here you can change those words if you want to but you don’t have to the default is good it will look something like this after you click out of the box or press ENTER on your keyboard so now that I have my next button the on click event says next button click so when they click on this button something’s going to happen now we’re ready to
code let’s go to the code page in the code it’s very simple to do it’s basically one line of code per button that’s all you need you will write it under the ready code the ready code is found at the bottom of your page and then under each little button depending on the way that you designed it for example these four represent my first four buttons the individual buttons for the individual people which was Julie Susan Mike and Jason for Julie
since she was in the first position or is a very first slide the code that I’m going to be writing it for her is dollar sign W open parentheses Cote shoe marks it could be 1 or 2 it doesn’t matter slideshow 1 because that is the name of my slideshow if you noticed the slideshow when you click on it it also has a hash tag name just like your buttons so you can either leave it the way it is which will probably be slideshow 1 or you can change it to
something else either way again it has to match your code then dot changed slide with a capital S open close parenthesis with the number 0 because Julie slide is in the first position so this is gonna be 0 and then the next one is gonna be 1 the exact same code depending on how many slides you have that’s how many numbers you’re going to keep adding never start with the number 1 always start with the number 0 if you have these and that’s all you
designed the individual buttons for each individual slide then you’re done there’s nothing else to add if you only have the previous index button then this is all you need bottom-2 if you have individual and do you have the previous the next button well then you need to follow the entire format it’s just an example you can have more or less buttons depends on you but it’ll be the same thing for the previous button it’ll be slideshow one dot
previous open closed parenthesis with nothing inside and for the next button it’ll be slideshow dot next that’s it pretty simple right well now let me go into the editor to show you where this magical code goes if you haven’t coded before keep watching if you have go into the editor and start playing with your code to see if it works for you now at the bottom of the page there’s a little tiny arrow click on it it says open and this is where
you’re going to start typing in your code these little lines of code that says export function Julie button click this automatically gets added to the bottom of your page every single time you click the event inside of the properties panel for that button so you don’t have to type that out all you have to do is fill in the blank here in between the top line and the last line little curly bracket that ends the statement basically and that is where
you’re gonna add your change slide code that’s all you need to know told you it’d be easy if you haven’t subscribed already please do there’s a button at the very top corner join my facebook click on community it’ll take you to the Facebook Wix code group it’s a wonderful community filled up with Wix users Wix coders and even some Wix developers you need to stop by and say hi click on this button the article it’ll take you directly to the article
where they have a completely different example because they use the slide show interaction by creating a multi-stage form you should play around that example to click on the API button this API list will give you the exact pieces of code that you need to type it into your code page for any specific thing for example this is the exact code for slide shows so that is where I got that code from well that’s it for today I hope you enjoyed the video
see you soon bye