Build Webflow CMS Dynamic Slider from Scratch | How To

hi everybody it's joe krug from finsuite in this video we'll learn how to build a webflow cms dynamic slider [Music] we're going to build this slider from scratch step zero we have a fresh webflow build we are going to cover every single step in order to build a dynamic slider with a dynamic slide count inside webflow let's jump in and see how it works we're in the live example going over the slider component we are inside a fresh web flow build and we are going to build this dynamic slider we are going to make it dynamic with the f and suite cms library we're going to first build the structure that we need then we're going to use the visual scriptwriter to go and add our two important classes to generate the script that we need to go and make this slider dynamic it's very simple it's very easy we're going through this step by step slowly for all beginners all intermediate level people to really understand how this works let's do it we are on a fresh build there's absolutely nothing here we have no pages we've never published we have no cms the very first thing we're going to do is build a quick little cms i'm going to go and call this my awesome collection let's do that and we will add a description we will add an image and let's go and add a link cool so now we have a bit of information here we'll add 20 items and there we go we have a full cms ready to work with great now inside the designer panel we will go and add a div this div is going to be the fs section before we get into the slider let's create a little bit of an outer parent structure to make sure that our slider isn't just on the top left of the page we have our fs section we will let's say give that some top bottom padding of 100 and let's go and add 50 50 here great just creating a bit of space we will put our fs content in here fs content will have a 100 width let's go and make this a max width of pixels and let's center it on the page when we get larger than a thousand pixels we want to make sure that this is centered on the page for us the auto margin left auto margin right is going to do that for us excellent this is the outer structure to make it nice to look at our slider note that we're using the prefix fs dash for everything in here the reason is if you go and copy paste this build into your build we don't want any naming conflicts we don't want there to be classes that are renamed or confusion so everything will be fs you can go and change it after if you want let's now go add this slider this is where the magic happens i'll go down to the components and we will add a webflow slider let's go and open this up inside the navigator and open up our slider we have our slider mask and our slides let's go and add classes to each of these so we know what we're working with we have our fs slider we have our fs mask we have our fs slide now be mindful that this is the fs slide not the fs slider the fs slide is like this great traditionally if you were going to go and build a dynamic webflow slider with this slider component you would have to go and create a new slide for every single item that you want in that slider that's not how this works these slides will be created dynamically with the fnsuite cms library and our collection list so we will just continue building on these two slides what i will first do is go and add a collection list inside this first slide i'll give it a source of my awesome collections and the awesome collections will be limited to one if you've done the dynamic slider before this looks like it's about the same we have the first few steps the same and then we're going to do a few more after that makes this dynamic what i'll do is go and add a class to each layer of this collection list wrapper so we have our collection list wrapper as fs collection i'll copy this as our official prefix for the dynamic stuff and we'll call this the wrapper i will call this the list the fs collection list and the fs collection item i will go and give 100 width and 100 height to all three of these layers we are essentially going to remove these layers on the published site so we want them to not really exist and to not really exist we'll make them 100 100 to expand the full size of the slide so we have all of these expanding the full size of this slide this will stay you can style this slider however you want it will stay on the published site these three layers bye bye they are gone we will essentially remove them so we'll go and put our div block in here this is not removed this is what is copy and pasted into the slide so let's go and call this our fs fs dynamic content fs din contact content no you know what i don't like that name let's go and change that what should we call this yeah you know what let's do it the slide content this is the fs slide content that is what we are actually doing here so let's go and create this also at 100 100 great i'm now going to go in and let's say add our actual content let's go and do that i'm gonna go add an image we have an image inside of our cms collection i'll go and put that in here before we get too far this is certainly in our way so let's go and call this the fs image we're going to do this at 300 pixels and let's go and create an inner div that will hold the content and we will go and add a heading let's go and add a bit of paragraph text and let's go and add a link block with some text inside awesome let's put a bit of a style on this let's say a flex horizontal align justify like this perfect now we can see what's going on we have our fs image let's give it a bit of space here and let's go and connect these to our dynamic fields sweet awesome description let's call this learn more now let's make this url dynamic we'll open it in a new tab excellent this is what we're talking about here let's go and center this let's center it like this and we'll also make sure that we are going to not run into our slider arrows great so this should be pretty good i feel pretty good about this this is our slider right here this is what we want this to look like great let's go into preview and make sure this works exactly what we're looking for excellent so now we are going to go to the second slide and what you can do is just go and copy this right inside these are just placeholders they're placeholders now they will be placeholders forever they are never going to be published with our slider the reason we are putting these collectionless wrappers inside the slide is just so we can use designer as a visual tool to build these dynamic sliders when we go into preview and we go to our next slide this is what it's going to look like maybe we have 20 slides or 50 slides or three slides we want to see how it looks in preview first maybe you want to go and add some webflow interactions to the slider maybe you want some hover effects whatever you want we are going to make sure that it looks good right away and i'll go and even apply some classes to these make sure that everything we want is working and let's go to this ridiculous color nice and let's add a transition cool for font color sweet good good don't care too much excellent okay so we have our effect we're good what we are going to be actually doing is essentially copy and pasting the fs slide content into each slide i'm going to show you what this looks like so i'm going to open up this second slide and i will go and unattach every single thing we have in here all of the connections to our cms will be removed and i will go remove this when we go to our published site this is what's happening right here you are looking at it we are copy and pasting each fs slide content into the slide and we are creating the amount of slides that we have for the amount of items in our collection wrapper great so this is looking great and just so we have this here this was going to look weird because it's a square and nope i don't have any images handy nope that's it so this is what it looks like let's go and just view this great the reason we just did that is to visually show you here inside designer that this is what's happening on the live site great this is the structure that we need we just built it this is the most difficult part of this entire walkthrough now what we will do is go to our primary list here this list that we have inside the slide i'm going to copy it and i'm going to paste it at the end of this section i can put it anywhere on the page it really doesn't matter anywhere anywhere anywhere the only thing i have to do is give a unique class to this list item we have the fs collection list we have another one here on the page we need to classify this list as something unique so let's go and call this the fs dynamic feed fs dynamic feed is going to be our official slide generation content generation master list for our slider so we don't want to only show one slide we want many slides and let's say we want 20. great we're showing all 20 here and of course we do not want this to be hid we don't want this to be visible if we were to go and publish this site like this this looks quite bad very bad we would not want to do that so let's go and make this hidden we have this hidden it does not need to be visible it's only serving as the source for our content inside the slider excellent those are the two classes we need we have the fs dynamic feed and we have the fs slider now let's go to the visual script writer and actually generate this javascript with these two classes without writing a single line here i'll go to visualscript.webflow.io and you will be met with the functionality tab we're going into the components tab and you can see we have our cms slider open here the cms list class is our fs dynamic feed this is the official list that is going to be populating the slider we have our fs dynamic list cool fs dynamic list then we have our slider class which is fs slider then we're going to reset ix and we are going to copy this code that's it you just wrote the javascript to generate this dynamic slider it's really that simple so i've copied the code i'm going to go inside the home page here inside the page settings you can also put this on site settings but if you only have your slider on one page go ahead and put it in the page settings and i'll go and paste this right in here that's it so actually before we go and paste this in let me first publish this the site and we'll see what it looks like then we are going to load that page with our script okay i messed up fs dynamic list is fs dynamic feed it's the fs dynamic feed that was a close one we have our dynamic feed i will go and re-paste this in here with dynamic feed great okay let's go and see this without the code the code is not being run here this is exactly what we'd expect to see we have this hidden we have two slides one of them is dynamic one of them is just this element now let's go and publish with this script and what we will see is our slider with many many slides and you know what let's make this super visible yeah let's let's invert these colors so we see exactly how many slides we have great so let's go and load this with all of our slides wow that was just too easy look at all of this dynamic content exactly how we want it we have all of our slides here all ready to rock and roll great now let's say we don't want that many slides and we maybe we just want five or we want six or whatever it is you can go and do that by limiting the items starting at one and let's show i don't know six great now when we go and republish this page we're going to see six slides nice there we go so you have just built a webflow cms dynamic slider it's very simple if you have questions about it if you're not able to do this you lost a step here inside this walkthrough please try it again figure it out you will be able to get it with just a bit of practice if you still can't get it go to suitejs.io join our slack channel join our communication community around javascript and we will help you with this implementation if you have questions reach out we're finnsuite we are here to help you enjoy this dynamic slider that's effin sweet

Channel: Finsweet

Views: 21,244

Keywords:

Id: FjuvDGbJayY

Length: 17min 45sec (1065 seconds)

Published: Fri Aug 14 2020