CMS Draggable Slick Slider in Webflow (2020)

what's up youtube in today's video we're going to cover how to make a draggable cms slider in webflow as always feel free to like comment and subscribe to stay up to date with new videos and if you have an idea for my next tutorial put it in the comments below so the first thing we're going to need to do is drag in a collection list and we'll drag that onto the page i'm going to put it inside this div called slider contain it's 100 width of its parent and its parent is a minimum height of 100 vh and flexbox aligned to the center to put this collection list in the center of the screen vertically so i'm going to get this cms from a collection i have set up called songs and then i'm going to give this wrapper a class of wrapper and we'll go ahead and give this list a class of list and then we'll give the item a class of item and then inside the item we're going to want a clickable card so i'll drag in a link block and just put it inside the item and then we'll give this a class of card and so we can go ahead and set the width on the item we'll set it using viewport width so we'll do 30 viewport width for now and then let's set a height on the card and we do 40 viewport with vw for the height of the card um so that's looking pretty good and then inside this card we'll want a background video so i'm going to pull it from the cms inside the cms i have a video url for each one ending in mp4 so i'm going to need to drag in an embed and that will go inside the card right there and then we'll give this class of embed and then we'll give it a width of 100 of its parent height of it 100 of its parent um and we'll put it inside the card and then the next thing we need to do is actually get the video code so all the code i use for this tutorial i'll put in the description of this video but we'll just copy this code here for the background video embed so open up the embed paste in the code and then there's two places we need to replace the url both of them say your url we'll replace it with the video url here and at the beginning and then once those are replaced we can save and now we have our video so the video inside this field is using a class of video and if we want to style it we can just drag in like a background video onto the page and then we'll give it the class of video and then we're going to want it to be 100 width and 100 height of its parent which is the video uh embed which is this one right here and then the card is a height of 40 viewport width and the card should be 100 width of its parent which is the item um the next thing we need to do is grab the list and we'll apply a flexbox to it and center a line and then justify to the left so now we have all those cards stacked side by side the next piece we'll want to do is actually have a title over each video so for each video um what i'm going to do is grab the item i'll set a minimum minimum width of 30 viewport width so that way it's a bit wider flexbox was kind of squishing in before and then i'll set the card to relative and then i'll drag in a div inside the card and this will be a text contain and we're going to position it absolute over the video so position absolute and cover height and width of it it's parent and then 20 for the z index so that way it's on top and then we'll use flexbox to put the things inside to the center we'll drag in a heading and make it an h4 and it looks like it's blue because our link text is blue so i'll grab the link and make the color white and then i'll get this text from the name of the song the title the next thing i want to do is grab this text contain and center align everything inside it and then i'm going to use em to add some padding on the sides so because my body font size is viewport width i can use em on everything and that's going to make everything inside that viewport with as well so that's looking pretty good for that the only problem um we're going to want this to whenever we hover over a video we're going to want it to stop start playing and whenever we hover out we're going to want it to stop playing so i'll leave this code in the description as well i'm going to copy this code and we'll open up our page settings and it's going to go in this before body tag spot and you'll notice it's grabbing the video class so as long as our background video has a class of video then this should work the only problem is we can't hover over that video in bed because this text contain is on top of it so we'll need to make the text contain not clickable that way when we hover over we're actually hovering over the thing underneath it so i'll grab this class of text contain and we're going to open up the code and then in the header this time i'll add just a style tag opening and closing style tag in between them i'll put a period in the name of the class and it'll open up the brackets and then in here we're just going to say pointer dash events colon the word none and then a semicolon that's just going to make this text container not clickable so we can actually hover over the thing underneath it and then the uh the item we're going to want a little bit of padding i'll use viewport with left and right for a tiny bit of padding on each side of the item and then the list i'm going to use viewport with as well and just give a little bit of padding inside the list so that way these items aren't directly touching on the sides so then from here what we're going to want to do is make this draggable with a slick slider so i have the code here definitely feel free to just copy it and then we're going to open up our project and the body closing tag section will just create a new line and paste in the select slider code and then there's quite a few things that we can do in here we can adjust the speed like when we drag the slide how long does it take it to snap into the new position infinite false means it will just scroll but it'll have an end but if we change infinite to true then we'll be able to scroll uh or drag both ways and it will never end slides to show is how many slides we want to be completely in view so like this slide hanging off to the side when it count has one of the slides to show uh but we will probably want three slides always in view so slip slider is going to set the width of these items so that way we always have 3m view so we actually won't need the width on this item but you'll see what it does when we when we publish so let's just go ahead and publish this because we did a lot and let's just test out um what it looks like so we open this up so first of all if we hover over a video it plays hover out it stops playing um there's videos on all sides and then there's three complete slides in view but we're getting a little bit of video on each side and we can click and drag and you see it snaps into place it just kind of slides it's pretty slow because we have the duration up so high but it's definitely sliding into place for us which is pretty good and we should be able to go infinitely in either direction and it should work fine no matter which direction we go i might bring the duration down just a little bit because it is a little slow with the sliding so open this up and then we'll go to the duration and right here we maybe bring that down to like 700 for speed um and then also notice like maybe we can make this the headings the leading a little tighter font size a little bit smaller and then maybe we add a little bit more space inside the text contain a little bit more padding and that should look pretty good so i think the next part that we want to do is actually have some arrows so above this wrapper i'm going to create a new container and we'll call this one if i can drag it in let me just drag it into the page uh so in slides inside the slider contain we'll call this one slider title and then we'll put all the slider info in here so maybe we'll drag in a heading maybe make this an h2 make it say latest songs and then we will also want arrows probably to be able to click and that way you don't have to drag you could do either or so we're going to drag in a link block and give this a class of arrow and then inside that we're going to have an image so we can drag in the background arrow first inside the link block we'll call this arrow underscore image and set the width using e-ms um something like that and then what we can do is grab this slider title and then use flexbox to center a line and then distribute so that that arrow's on one side the title is one the other and then we'll want one more arrow so i'm actually going to duplicate this arrow and then this one i'm going to replace the image with the forward arrow and then we're going to want to group those arrows together so i'll drag in a div and call these arrow contain so this is what's going to hold both of them so i'll drag in both the forward and back arrow into that arrow contain that's looking pretty good we'll give this some left margin using ems just to space it off from each other a little bit and then this whole title container we can give some padding using em just on both sides so that it kind of aligns with our slides here and then this one i may actually bump it over a little bit um so that's looking pretty good maybe we reduce some of this this distance a little bit and i may even want to increase the font size some on here and then we can also let's see set a weight and maybe bring the space in a little bit think of 0.05 em or 0.03 and then let's also add some padding top and bottom or just bottom really that's all we need to this container um that way it's kind of not touching the slide so that is uh that works for that so the next thing we need to do is actually make these uh worked where when you click on it something happens so if we go into our slider code you'll notice we have slider previous as a class and slider next is a class and they both have their own function but we have to tell it what slider do we want this to work on and it's going to be the slider with the slider id here so we'll copy that id that says slider id and then we'll grab the collection list and we'll give it an id right here of slider id and hit enter and then now it should work we just need to add a class to these link blocks so this would be slider dash prief p-r-e-v and then this link block we would add a combo class of slider dash next that way when we click it it takes us to the next slide so let's go ahead and publish that and we'll test it out arrows um let's see okay so i have a little bit of an issue i'm noticing here i think that and probably needed to set a width on this to 100 width let's just change this to block for now and see what happens so if block it works um it's really weird what i can do instead is actually just grab this container and change its relative and then under float you can just make it float to the right and then this title here uh we'll do relative and float to the left and that should hopefully do the trick not sure why it wasn't liking flexbox it's kind of strange okay so we have that it appears to be working we can click the arrows um it's looking good and then also i may reduce the line height in this heading to get a little bit closer to the arrows and even make the arrows a tiny bit smaller um so something like that should be good and i may reduce the height of this card as well so maybe um 35 viewport width for the height let's go ahead and preview that and see what it's looking like yeah that feels that feels better so now we can click the arrows to go next in previous we can click and drag we can hover over a video to get it to play so i think the next thing we want to do is whenever we hover over a card we want the background color of the body to change so like if we hover over this first card maybe it's red if we hover over the second card maybe the background color of the body's blue so we can have like three background colors maybe and then we can just uh alternate them for all of the items in our collection list so we'll say every first item in the list is blue every second item in the list is red every third item in the list is green and then just repeat that for the fourth fifth and sixth items so it'll just repeat that pattern and the way we do that is we can use um some code that is for the inf child code and i believe that's this one right here so i'll copy that and we're just going to drag in an embed and we'll just put that on the page this time that way we can actually see what it's doing i'm going to go ahead and put that right above the body open up that embed and paste my custom code and in this case we don't want to change the actual collection item we want to change something inside the item so i'm just going to delete this first part so we're going to need to store the color we want inside this item before we can apply it to the body background color so i'm just going to create a div in here and uh i'll call this bg for background and then dash color and then that's going to be the name of my class and i'm going to want it to be directly inside of the item so it needs to be a child of the item and then what i can do is just give it a background color for now we'll make it this bluish color so then from our code we can open that up and then we want to change the class to be item for all of these so we're targeting the collection item because that's the class of our item and then what we're targeting inside of it is the class bg dash color for each of these so we'll change that and right here so now it's saying every first item make it this color second make it this color every third um background color inside the item make it that color and those are some really bad colors so let's go ahead and get our actual color code right here so i'll copy the blue hex code right here and then open it up in here and paste in replace that yellow with the actual color and then the next one you see it changed this one and it changed the fourth one because it's starting to repeat the pattern after the first three items in the collection list so for the next one we're going to grab this color and i'll copy that code open this up and paste it in here perfect and then we have one more color we need okay i'll get this one here copy it open it here and paste it in here perfect so it changed all of them so now um we want this to be on the page so that way we can select it but we don't want it to actually be visible so i'm just going to set the paddings to zero to zero it out and now we just need the code that's actually going to when we hover over this card change the body background color so that would be this code right here i'll leave it in so we can copy it i'll open up in the and i'll paste it in here and then we want to target the item so whenever we hover over the item we're going to get the background color of the background color div inside of it and we're going to set that to the body and then when we hover out of the item again we want to change the body background color to what it was before so i need to get that green color that it was originally um copy that right here open this up and then down here you just want to change this back to what it was we'll save and publish and we can test this out so we come over here and we hover over this changes to blue hover out changes back to green i remember this one to the reddish each one of these have their own color perfecto all right so we may want to make this transition a little bit smoother so that way it doesn't just snap to that color what we can do is we can grab the body and we'll target all pages on the body we'll add a transition and we'll apply it only to the background color right here and then we can add whatever easing we want just like we were creating an interaction if we were creating an interaction in webflow we can add our easing duration and now it should have a bit of fade whenever we hover over these different background colors so let's see can hover over this that yep and it fades in and out to our different colors we can drag to change the slide we can click to change it and one other thing we might do the rest we can really just create webflow interactions for for the next part we want whenever we hover over one of these items we want to gray out all the siblings and only focus on the item we are currently hovering over so what i can do for that is actually just click on the item and then we'll add an element trigger of mouse hover and we'll make sure this affects the class and we'll create an interaction of hover in and then what we want to do is change the opacity and then we'll make this affect the class only siblings with this class change the opacity to 50 um maybe 60 is fine and we'll do out quart for the easing and then we will do a hover out and then let's duplicate and this one's going to be called hover out and change the opacity back to a hundred percent so now whenever we hover over an item all the siblings sort of gray out and actually may make that more extreme after all maybe we'll back this down to um i don't know 30 um so yeah that way we gray out all the siblings we're hovering over the current item one more thing i may do is make the uh video scale inside the card so for that to happen and you set the overflow on the link on the card to overflow hidden and then we're going to scale up the embed whenever we hover so i'll actually make the mouse hover apply it to the class and now we can select the scale in and yeah now the the video is scaling up inside so actually we might do 1.1 for this that's very small 1.2 maybe yeah that's gonna work and then we can set the duration of one and i may even just change the easing to outside that way it's a little smoother what's happening okay so then we can uh go ahead and duplicate this and this one will be called scale out and then we'll delete this first one and we'll just change the scale back to one when we hover out so now the video kind of scales up and um the others gray out and that's perfect one other thing i may do is actually grab this whole item let may just do a transform rotate and just kind of rotate this a bit just ever so slightly to where these are more rotated over so maybe we'll do negative one for the degrees and then that should do the trick so i'm going to go ahead and preview this and see what happens and let's go here all right if you hover over it the video scales up starts playing the others gray out the colors and we can click and drag so i think our last step for this is really just to make it responsive so if we go back to the page it's stacking pretty well we probably want to start increasing the font size on the body so right here i may increase the font size a little bit to make it scale a little bit better maybe 1.8 or 1.5 so that is scaling much much smoother um even here we can increase um it's not too bad uh it is getting kind of small on this breakpoint so we may want to actually change this um on this uh this breakpoint here which i believe is um 767 so for the slider code here we can change our 767 breakpoint which is portrait to only show two slides instead of three and then on our mobile version mobile portrait so this is actually landscape on our mobile portrait we'll just show one slide so let's go ahead and see what that would look like if we change the width of our item to where we're only seeing two on this one so that would be about 45 for the width and then one here what it would look like if we were just seeing one so we'll increase the width a bit and uh that's about 88 um and we can increase the height so the height is defined on the card so here we'll increase the height quite a bit to make these a little nicer and on this break point we'll also increase the height a good bit and um i may increase the font size here because it's getting a little small so on this breakpoint maybe i'll do 1.8 or 1.9 and then this h4 i could increase the font size quite a bit too to where it does something like that that's looking pretty good so that should all be scalable all the way down and we can go ahead and publish i'm gonna pull this out test it on this breakpoint we hover video plays we can drag scale go down to our next breakpoint this one refresh we can click drag it shows every two and then finally our mobile breakpoint um which we can't quite preview in chrome so i'll actually have to open up firefox and preview it there yeah so our mobile breakpoint now we're just sliding one slide at a time really really nice and yeah that is looking good so that's how to make a completely custom cms draggable slider in webflow i hope you've enjoyed thank you

Channel: Timothy Ricks

Views: 16,209

Rating: 4.9923224 out of 5

Keywords: webflow, slick slider, slick, javascript, jquery, custom code, slider, cms, collection, dynamic, draggable, custom, animation, interaction, how to, tutorial, lesson, build, collection list, collection item, background video

Id: AG_REG9p61E

Length: 26min 45sec (1605 seconds)

Published: Thu Oct 22 2020