CMS Carousel Sliders in Webflow (2021 Complete Guide Splide)

what's up youtube welcome back to the channel for webflow pros in today's video i'm going to show you how to make this interactive carousel slider in webflow i'll show how to fully customize the slider and make it responsive to fit your design so let's dive right in alright for this tutorial we'll be using splijs it's very lightweight easy to customize and it works with multiple sliders per page works with the webflow cms and responsive units i've tried quite a few sliders out and this has been my favorite so far i'll leave the code for this tutorial in the description of the video copy this first block which is all the css go to the page the slider will be on and in the head tag section paste all the styles and then for the second block this is the javascript we need to copy that and on the same page in the closing body tag section this is where we'll paste all the javascript i'll be building this out with a collection list but you're welcome to use divs in place of the wrapper list and item if you'd like to avoid using a cms either way we need to drag a div onto the page and i'm going to drag this div directly inside a container and i'm going to give it the class of spline and then inside of that this is where i'll drag in my collection list and i'll pull it from the collection that i have so the wrapper gets a class of splied underscore underscore track and then inside of that the list gets a class of spide underscore underscore list and finally the item needs a class of supplied underscore underscore slide the sply div i'll go ahead and give a width of a hundred percent and a position of relative the uh collection wrapper or the track i'll go ahead and give a whiff of a hundred percent and in the collection list i'm going to apply flexbox align to stretch justify left and then i need to give the items a set width so in this case i'm thinking i'll have about three items inside the container at any time so do a hundred divide it by three percent that should give me my three items they're in a flex box so they're being squished but i can set the sizing to don't shrink or grow to maintain a exactly one third width that i want here now i am getting horizontal scrolls so all my sections are in this div called overflow it can give a width of a hundred percent overflow hidden and position a relative to disable that horizontal scrolling i'll also paste my card design inside my collection item now the way that i've created this get separation between cards before is just to add padding inside the collection item we can't use margin but we can use padding and then if it was a center to line slider i would add it padding to both sides only issue with this method is any full width content in the containers directly above or below we'll realize that these slides aren't actually aligned with the edge of the entire container anymore they're not spanning the full width so splite actually has a better option for that then the overall spy div we need to give a combo class because we may have multiple of these sliders each of them may have different settings so we need to tell the code which slide to apply these settings to so i'll just give it a class of slider one now in our code you'll notice we're targeting the slider one we can have multiple of these slider ones on the page but they're all going to share the same settings if we needed it to have different settings we'll have to duplicate it and make a slide or two so this per page move is what determines the width of our collection items since this is set to five items per page the width of our collection items would be twenty percent each to fit those five items inside the container so the whiff we set in webflow doesn't actually define what we see on the live site so we're gonna switch this to three so we just see three items inside the container and then we have this gap property that's what we can use to create the space in between our slides and the advantage to using this over padding is the items will go all the way to the edge of the container while still maintaining a nice gap in between each of the slides i'll leave this set to 2 am for now now on the live site we have this nice gap between the items but they're still allowed to span the full width of the container we can drag out like this we have these basic split arrows but we're going to want to customize them and build our own i'll create a copy of the arrows and pagination in the style guide section that way i can customize it at any point i want so i'll start by dragging a div and giving it the class of slide this won't be a functioning slider it's just to have a style guide copy i can change later and then inside that div i'm going to drag another div i need to give this one the class of spline underscore underscore arrows and then inside of that we can have the actual arrow elements so these will just be webflow button elements and it's going to have the class with supplied underscore underscore arrow and then i'm going to go ahead and delete the text inside of it and then we also need to give it a background image so we have that arrow image applied so just add that background image here i'll set the width to something like 30 percent and set position center and no tile and then i'll just go ahead and duplicate the arrow now each of these get combo classes so this one gets a combo class of spline underscore underscore arrow dash dash prev and then i'm going to just use a transform of rotate to flip it over and then this one gets the combo class of spide underscore underscore arrow dash dash next now we can actually just copy this uh entire arrows div and let me go ahead and put flexbox on it just to make sure they stay stacked side by side so copy that div and we can paste it anywhere inside the main slide div if we want to apply our own custom arrows so they can be on top above the collection list they can be underneath it wherever we want them to be now on the live site it's working we can press and it's navigating to the next slide but when we reach the last one and we click it jumps us back up to the top of the page that's because button elements and webflow are actually just link blocks i feel like i've been lied to this whole time splide requires these to be actual button elements so instead of using the webflow button let's drag an embed in and create a real button using code so we'll just do a button like this and then close it off like that and then we want to give this a class that matches the classes we used in web flow so in this case it's split underscore underscore arrow and then we'll do a space to create our combo class and it has the combo class of spline underscore underscore arrow dash dash brief and then we can save this and let's just duplicate this embed and then this one here will have the combo class of dash dash next and we can save i'll delete the original ones and the great thing about this is any changes we make to the original webflow elements down here will also change the style of the ones in the embed now let's create the style for our pagination dots we'll go ahead and add a list element onto the page and we need to make sure it's inside of the slide and then this one needs a class of splied underscore underscore pagination now the items inside of that will go ahead and give a class of spide underscore underscore pagination underscore underscore item and we'll use that to set them to inline block so that way they'll stack side by side inside that item this is where we can actually drag a div and this is the actual uh dot that we see so it needs a class of split underscore underscore pagination underscore underscore page and this can have a width height we can style it however we want a background color and then i'll just go ahead and duplicate the item while we're at it and let's go ahead and zero out the padding that comes with the um list right here we'll go ahead and give this a little bit of left margin of 0.3 ems and i'll even turn the opacity down to something like 20 now the one that's active is going to get a combo class of is dash active so once we have that class applied we can change that maybe change its color its opacity whatever we want to change there so i also want this to kind of be on side of the arrows since its parent which is the overall slide has a position of relative what i could do is basically give this entire list a position of absolute to the bottom corner of the parent and now it will be fixed right there the pagination list works a little bit differently than the arrows in that we don't have to manually paste it inside of each slider on our page it's going to be added to it after page load but we'll use this copy here so that way we can style all of them across the different breakpoints now on the live site we have our functioning arrows and functioning pagination whenever we reach the beginning or the end of the slide we want to disable one of the arrows so that way we know we can't go any further to do this we'll open up an embed on our page inside the style tags we're going to target a class of spide and then we'll do space and the word button and then we'll do a colon and the word disabled and then we can open up our brackets and we can set this maybe to an opacity of 0.4 and then that'll do it so we're targeting every slide because chances are we'll want this disabled button to look the same on every single one of our sliders then we're finding every button inside of each of those sliders only when it's disabled and we're lowering the opacity of that button since these button elements have a nice css transition applied it should fade to that lower opacity and sure enough that works i went ahead and duplicated this section and replaced the content inside the slide item with a different design what we can do is go ahead and select the overall section give it a combo class of is dark that sort of changes the font color in the background color to invert it now we do want the uh pagination color and the arrow colors to change out whenever we're in this section and they're not actually in here for us to be able to give them unique combo classes so we can target them with css whenever they're inside of a section with that is dark class we'll open up our embed we'll target the is dark class we're going to create a space and we're going to look for an element inside it with the class of splied underscore underscore arrow and then we'll open up our brackets and what do we want to do with the arrow well we could change its border color maybe change its background image take it piece by piece but in this case i think the easiest thing for me to do is just to invert the color so i'll do a filter i'll do invert of a hundred percent and then end it like that and now whenever it's inside the dark section you'll notice it's inverted to white we'll also want to change the pagination so right now all the pagination dots have that same background color this dark background color and we're just turning up the opacity on the active one so what i could do is whenever it's inside a dark section i could set it to be this light color instead so i'll just copy the hex code of that light color and then open up the main embed again and then what we'll say is we'll target this theme is dark section and then we're going to look for a slide underscore underscore pagination underscore underscore page which is the class of those dots and all we're going to do is set their background color to the hex code that we just copied and save when the top section we actually want the pagination dots to disappear altogether and leave them only in the bottom section we're also going to want this section to be a little bit offset to where we're seeing a little bit more of that third slide peeking in about half of it here instead of this full one here so slides figuring out how wide each item needs to be to exactly fill up this container and we can't say show three and a half items to where a little bit of this one's peaking in and we can't decrease the width of the actual item here because the width of it's being set by the spide code not by our webflow width here so one solution we can do to fix that is with the main slide div selected we can add a bit of padding and i don't want to add it to the main class because i don't want it to add to the one beneath so i'll just create a new one and i'll call this pill and it's for the pill shaped ones and i'll set some padding right here of 14 em and it just pushes it over a little bit so now the available space inside this main supply container has been reduced so that way when we see these three items they're filling up the width of the available space but we're seeing a bit more of this next card peak in because we added that padding here and this one remains intact where it's taking up the full width since we want to hide the pagination dots only when they're inside this first slide i can copy the class of this first slide here and open up my embed inside my css and then under our pill slider we'll go ahead and put the uh we'll look for a class of splide with the combo class of pill and then we're going to look for an element inside it with the class of splide pagination and we'll just set the pagination to display none to hide it only when it's inside of our pill slider here now on the live site this one has no pagination it's a little bit offset and then this one is still full width it has the pagination and the colors are inverted but both of these are still relying on that slider one combo class so they both share the same slide settings let's also create our active slide animation so on this first one whichever slide is active we just want it to scale up inside its containers so i have this image here and then its container is set to overflow hidden and has the pill shape so the image i'm actually going to want to apply transforms and it's going to start with a scale of 1 but whenever it becomes focused we'll scale it up to maybe something like 1.1 and instead of just snapping to that scale we'd like to add a transition and i'll apply it to transform if we get more specific and only use the ones we're actually going to need it'll perform a lot better so i'll apply maybe 350 milliseconds to this i just want it to be less than the duration we actually have in the settings of how long the slide transition takes so right now it takes about 600 milliseconds so i just want this to be a little bit less than that time there so whenever the slide is active that's when i want it to scale up so i can copy the class of this photo that i want to scale i can head over to my embed first thing i want to do is target the active slide so i'm going to get all the slides by doing spot underscore underscore slide and then i only want to get the active one so the spy gives the active slide a combo class of is dash active and then inside of that active slide i want to find the uh image with this class and then once we have that we can apply a transform of scale and we can scale it up to 1.1 so now that image is scaling up inside its container when it's become focused at a nice smooth duration now for this one here we actually want the actual container to scale up but the photo inside the container to scale down and the text to become a higher opacity so we'll start by taking this photo and scaling it up initially to 1.2 so it's a lot higher and then it'll have that transform of 350 milliseconds we'll also add a transition to this one and it's going to be applied to transform as well and again it would be 350 milliseconds and it's going to start uh scaled at 1 so it's just not going to scale and then we'll scale it back up whenever it becomes focused we'll also take this div right here and maybe give it a class of text opacity and we can set this to a lower opacity maybe like 30 percent and add a transition applied to opacity of 350 as well so that way when we increase the opacity it fades up to that higher opacity and we only want to do all this whenever our slide is active so we'll start by grabbing this photo we want to scale down we'll open up our css and underneath our square slider this time we're going to again target the slide slide with the combo class of is active and then we're targeting a class inside there which is the photo and what we want to do with that is basically grab its transform and it's scaled to 1.2 right now we'll just scale it down to 1. so then we're also going to want the class of this actual image element and this is the thing we're going to want to scale up i'll paste that class there we'll copy the code we wrote above and this time instead inside of the active slide we want to find the overall container of the image and we're going to scale it up to 1.05 so it'll be really subtle we're also going to want to highlight the text so we'll get the active slide again and this time the element we want to find inside is the one with the class of text opacity that we created and this time what we want to do is just take the opacity of that div and turn it all the way up now when a slide becomes active the text gets highlighted the actual container scales up and the image inside scales down i want it to be anchored though to the top instead of scaling from the center so with the actual container selected i'll apply a transform and set the transform setting to scale from the top now the alignment of these just feels a bit nicer let's go ahead and work on making this slider responsive before i was using the wizardry technique on desktop so everything was just kind of scaling up and down with a unit one tablet though everything's kind of just switched to pixels so we kind of have a bit of wrapping and like things are expanding in different sizes so the first thing i would want to do is grab the entire slide item right here and set its width to be 50 so that way we have just two slides in view and that will give us a little bit more space for all our items you'll notice though that the height of these items isn't scaling in anymore it's not being consistent um because this height is essentially even though it's set to ems it's pretty much pixels now um so the height isn't changing while the width actually is so one thing that we can do to fix this is actually on desktop what we can do instead of defining a height on this image container we can remove the height and set top padding using percent so maybe like something like 124 percent now it's accounting for the height of this padding plus the height of the image inside we don't want to account for the height of the image inside so we'll switch it to position absolute to cover its entire parent and that way this padding is now what's defining the height of the items we'll do the same for this image right here position absolute to cover the height of its parent instead of setting a height on its parent we'll just give it a top padding of 66 percent now on tablet when we scale in and out you'll notice that the height of the images are also scaling in and out and they're maintaining the correct aspect ratio i went ahead and set the container side paddings to viewport with that way that space kind of scales because especially since we're having some cards hanging over the edge we want to make sure we're always leaving enough space so that way we can see a little bit of it peeking in over the edge one thing that i can do though is we have on the main slide of this one right here we have this bit of padding right here right now since it's set using ems it's essentially pixels but i want this padding to scale as well so i'll go ahead and set this to six viewport width and that'll reduce it a little bit but still give this a little bit of offset to where we have this item peaking in a bit and that's looking good there once we get down to the next break point this is probably really where i would just make each one of these slides a hundred percent with so we'll grab the items give it a width of a hundred percent and then we probably won't need to see uh that much of the next item peaking in since it's full width at this point so i'll probably just reduce the padding to zero here and we'll just get a little bit of it peeking in over the edge there and it'll stay a hundred percent on the next break point down as well now changing the width of those items in webflow doesn't actually change it in our slide settings so we got to go over to our splite settings and luckily both of these uh sliders are using the same settings here so this per page move tells it how many items to show at a time and on desktop it's showing three but these break points that i have in the code exactly match our web flow break points so in tablet if we want to show two we can just copy that and paste that setting there and when mobile landscape will only show one and mobile landscape here will show one as well now the gap between the items was set using ems which on desktop is equivalent to viewport width but on tablet would be equivalent to pixels and we really want the gap here to be viewport width on tablet and below that way the gap scales down with the width of the browser so i'll change the value here on the gap to the review port width and put that same gap on each breakpoint now on the live site what we'll notice is that our slider is completely responsive on desktop we're showing three items when we get to tablet view it's going to snap down to two items both of them still work this one's still a little bit offset so it's a little bit less width than the one underneath and we come down to mobile view and we get one item even when we scale all the way down we're still seeing a little bit of an item peaking in on either side our pagination though is sort of overlapping our links so we can fix that in webflow before our pagination was positioned absolute and that was fine uh for desktop but once we get to tablet we don't know how many of these dots we were going to have and i don't want it to ever overlap those links so i'd probably switch it to position relative so that way it just stacks and i'd probably remove the padding from or the margin from this side and add it to the other side since we're going to have an alignment like so and that's probably going to work pretty well for those pagination dots also on this breakpoint just for this one slide where honestly maybe for this break point i would probably want to center it up it's fine here but because the text is left aligned because the text is center line on this one i think i'll switch it to a center line here so i can just create another combo class and call it is mobile center and then i'll use that to switch the flex direction since this has a margin of 1 em on one side just add padding to the overall container of one am to basically get this to be perfectly centered and that's looking good there next let me quickly walk you through a few of the options that splide has if you go to the documents tab on their site and click on options here you can find a full list of options with descriptions on which each one does to apply an option we'll type the option name and then we'll type its value most values need to be surrounded by single or double quotes unless it's just a number with no pixel viewport width or any sort of unit behind it or unless it's true or false those are the only two types that wouldn't get quotes around it this trim space option for instance by default is set to false that means when we reach the end of this slide this very last slide is all the way on the edge if we set this trim space option to true instead then when we navigate towards the end this last slide right here is all the way at the end rewind is another one that's set to false if we change this to true then on the live site when we reach the end of our entire list and click it cycles back to the first one we can change the speed at which the slider moves and the speed at which it rewinds wait for transition is set to false if we change that to true then we can't click to advance to the next slide until our transition is completely finished drag threshold by default is set to 30. this is how far do you need a drag before the next slide is pushed over if we increase this to something really high like 350 we'll feel a lot more resistance before it's actually pushed over the type of the slide by default is set to slide this means it has a clear defined start and end point if we change this to loop and save now our sliders will be infinite with no ever stop or end point by default the slide all the way at the beginning is the focused one but if we want the middle one to be focused all we have to do is change focus from zero wrap it in quotes and put the word center then our middle slide becomes focused if we want to crop off these two ends right here and only see these three slides in the middle all we have to do is grab our supplied container i'll go ahead and give this a combo class and set the overflow to hidden now those excess slides are being cropped off on this example but this example still allows to bleed full width both of our sliders so far are using the exact same settings so if one's looped then they're all loop if one has five slides then they all have five slides if we want to have different settings for different sliders what we'd have to do is copy all of this code right here make a duplicate of it down here paste it and then we need to renumber it so for instance this would need to change to slider 2. this would need to change to slider 2 and then also this class name would need to change to slider 2. then on our split div we could add a combo class of slider 2 instead of slider 1 and now all our slider 2 settings will be applied to these items now we can easily set this to show 5 one desktop increase the gap and even set our overflow back to hidden and when we come back to the live site this one shows three this one shows five and there's more space between them if you've enjoyed this video please hit that subscribe button so you never miss another video if you'd like to check out the cloneable for this project the link is in the description to see how to push the functionality of slide slider even further check out this tutorial on my patreon page i'll catch you in the next video goodbye

Channel: Timothy Ricks

Views: 11,652

Rating: 4.9737992 out of 5

Keywords: webflow, how to, tutorial, lesson, advanced, pro, course, building, design, development, interactions, animations, css, javascript, code, custom code, wizard, awards, interactive, slick slider, splide, splide js, carousel, cms, collection, slider, slides, drag, draggable, responsive, glide, glide js

Id: 1QY8Kab4SNs

Length: 25min 15sec (1515 seconds)

Published: Thu Jun 17 2021