Looping carousel of logos in Webflow using Splide JS

this Aditya from fin Suite today I'm going to show you how you can set up a looping Carousel of logos and content using splite.js [Music] right so I've noticed like as of late a lot of projects have been have been you know using this kind of Marquee animation where uh where things just move from left to right endlessly and it's uh it's something that clients have been asking for more and more often and I felt like there are a lot of solutions you can do it with webflow interactions you can there's a lot of ways to do it but I felt like splyde is probably the easiest of them all and that is primarily what I want to show like how easy it is and what are the different things you can do with it the first thing we want to do is we want to grab the the cdns so I'm just going to close some of these tabs that we don't need and I'm going to go ahead and type in splide CDN so you can just go here to actually instead of taking it from their site I will go to obsidian.js this is like the best place to grab cdns for everything so we're going to be grabbing the uh the Javascript file first I'm going to copy the whole script tag and I'm going to paste it inside of my body tag and I'm also going to copy the CSS and I'm going to paste that inside of the head tag we need the CSS I'm going to need the Js so that's slide um you know imported the cdns but since we are using auto scroll in this example since we want to make sure that when you load the page the logos are already moving we will be using an extension of splite that is called auto scroll and this is the underscore extension again you can find this CDN on JS deliver so I'm just going to go there and I'm going to copy the CDN for auto scroll actually this is going to go inside of the body all right so those are the all the scripts that are imported all right so let's do the the setup inside of webflow it's fairly straightforward so what you have here right now is classic client first section section home logos you have that in global insided you have padding verticals container large text align Center so we have all different contents here I'm just going to go ahead and create one word to block go to margin top and let's give it a margin large that's good so this is where we will be uh putting in our logos Grid or slider covers or whatever you want to call it so I'm going to go ahead and add in another div block let's call this one splite you can call it anything you want but I'm going to call it splite let's just make sure that we give it an ID because this is what we're going to be using when we add in the custom code to make this slider work so logos is the ID I'm going to go ahead and give it and then what you have to do is you have to add three more div blocks one inside the other we have it all now I'm going to call this slide track and these you cannot change these have to stay the same so split track slide list and slide slide all right and the slide is where your uh your image can stay so I'm just going to add in an image and let's go ahead and select a random logo here so I'm going to go ahead and duplicate this like eight times four five six seven eight and just for the sake of making it look good I'm gonna go ahead and make sure I select an actual logo for all of these and you'll notice I didn't have to apply like any styles to any of those div blocks that I just created all you have to do is apply the Styles really I mean apply the classes sorry you don't have to apply any styles to it only the classes so you'll notice splide here has nothing slight track has nothing it's all default size nothing to do here so that's a that's like our whole setup and I think we can go ahead and start working on implementing the code to make it all work now of course right now it's uh it's a simple looking list of logos so I'm going to go back to my page settings the first thing I want to add is of course my scripts which I just grabbed from somewhere which I will share with you but this is the script um and I think what you find on splyde's actual website slide auto scroll is a little bit different than this so this is what you want to be using uh we are using an ID here to Target the the splite uh slider that we just created the ID was logos so you will see logos here uh we create a function so just have to make sure that these are always the same they can be I mean they don't have to match the name of the ID but I'll just make sure that you're using a unique function name and we are using this part that will auto start the auto scroll feature and we are mentioning a speed of 0.8 and I mean let's see how that looks right now I know it's going to look horrible but I like to publish things uh you know step by step all right horrible I'm just gonna now go ahead and start adding in some options that we have for customization and basically try and make it look better so I'm going to start with let's add a per page so what this does is it allows you to like show an exact number of of slides per page so I'm gonna go ahead with five we will see what that looks like in a bit um since we had those ugly looking arrows here and also this pagination I'm gonna turn those to faults so arrows false pagination false so that's going to remove those things uh what we also want to do is be if we want like the logos to be on Loop right we don't want the slide to just stop after all the eight logos are done we wanted to like continue like looping so I'm gonna do um type Loop these are all things that you can find inside of splite options so if you go to slide options just Google that and you will see options here and you will see it has plenty of these options so we're just going to be using some of the most important ones that you will most likely need and yeah I'm just going to use those and remember if you have to put a comma after that otherwise it breaks so after every single line of these make sure you have a comment about it so let's see what that looks like list I love it and the site gets published this quick never happens and client projects are right looks like we are already set it looks good it's just that it's uh it's cutting off here when it shouldn't so let's see why that's happening so let's let's add in uh an override Style to the uh slide track and let's say overflow visible importance this is going to override anything that might be blocking probably not the container as well because container is visible but let's see if that does it there we go yep it was it was a split track so I remember now like this was one of the problems that I ran into like ages ago uh I just couldn't figure it out and then I remember it it was yeah it was a track so now it looks good and you can also drag it uh and it pauses by default when you overrun it so there are a few more options that you can use here for example pause on Hover pause on Focus so if we turn this false it's no longer going to pause when you hover on it um and let's see what else we can use um let's see let me open up the code again you can also use Focus Center so what this does is it it starts your um your slider from like the middle and like when you drag it it's it's always going to Center the slide that you're on so I normally like to you know always include this um you can also one more important option here is to keep a gap of a certain gap between each slide now I know you have like five per page but for example if you if you make your screen smaller it all kind of sticks together so having that Gap there always make sure that there is always that 1.5 Ram between uh you know between each slide so I've done that I'm just going to publish so I think that's uh that's pretty much looking good there's one more option that I'd like to use it's the direction so right now by default it's going from like right to left uh but if you want to make it go from left to right you can always add in uh Direction uh LTR so that's left to right you can also do RTL so that's right to left so that's pretty straightforward um I think that's that's pretty much it let's go ahead and duplicate this and create um a new a new Carousel but with text instead all right let's keep going uh let's let's go ahead and create a second instance of this slider it looks pretty ugly in the in the editor in the in the designer so if you want clients to manage this content you can you can uh even set this up with CMS and that is again something we are going to come to next uh for now I'm going to move uh move on and let's duplicate this entire section and instead of all of these images I'm just going to have one single slide and I'm just going to add in a heading that says this is a cool heading and and that's it I'm just going to turn this into now a slider that loops and just one thing to remember you have to change the ID because there can only be one unique ID so let's call this text maybe I mean yeah text works uh let's go ahead and duplicate the first instance that we created so of course like you obviously know this but you don't have to duplicate all of these scripts all you have to do is duplicate this main script that we are using here um and then I would ideally change the name of this function because it's a unique new instance and I would also change this ID um I think this should be enough to make it work but here we just have one slide so I'm not going to use per page I'm just going to remove that and I think I will leave the rest as is and let's see what that looks like let's see okay so I only see it once okay it is happening uh it is looping but it's like extremely far away from uh the other slides and let me take a look at why that is happening there is an option that lets you set the width of each slide to auto so I think it's called Auto bits I'm just going to turn that to true so what this does I think is it it will just automatically detect a bit of the the slide and just make sure it puts the next uh the next slide right next to it so let's see if that helps and there we go it is um it is looking good so but hold on it's yeah it's not exactly looping correctly let's see maybe we don't need to add the focus to it um let's see what else autowit is good arrows pagination Direction all of this looks good I think uh I think we're good let's just see what it looks like with doubt without the focus okay all right so it looks like there is something wrong with it all right so this is the code I copied just now from a version that is working correctly so I'm just gonna change this to uh text this I mean this can be anything uh what we have here we have Gap I mean all of this is pretty much exactly what we had let's see if this works let's try adding one more slide I mean if it was just one slide maybe that's a problem so let's try adding one more see if that helps although I think it's gonna be the same okay I think it's working now all right so you probably need to have at least two slides so just you know whatever text you're using duplicate it and make sure you have two slides I think uh splite just wants to have enough content there um all right so well that's how you do text and I remember there is uh there is a problem with this that if you change the direction to uh the opposite it kind of messes things up so let's try that so if I change the direction from left to right to right uh to left let's see how that looks so all right interesting uh so as you can see like the uh the full stop is now instead of being in the end it's uh it's in the beginning and uh this one's looking weird so I'm just gonna give it a class again uh and let's make sure that there is a no wrap applied so that it doesn't break into multiple lines and on top of that actually first let's see if that improves things okay let's take a look that's looking good and I'll go ahead and add a gap because why is there no Gap it's zero and let's make that two I just want to make sure that the the full stop there is at the right place it's not at the beginning okay it is at the beginning so this is something that happens with splite that um if you go from right to left it it just puts your full stops and commas in the beginning of the sentence and I found a bit of a hack to solve that like if your client really says that I want it to be right to left but then it becomes a deal breaker so what you can do is you can also use a negative value here so if you change this to minus 1.5 I remember doing something like this um you know playing with the left to right and right to left and the minus and pluses and it it just worked so let's see if that helps okay now it's moving the other direction but the the full stop is still there so now let's change the right to left to uh left to right there you go now it's moving from left to right and the the full stop is now at the right place so um I think that works perfectly so I will share uh a uh you know a read-only link for this so that you can just copy these um perfectly working um uh carousels and then yeah all you have to do to use it in your project is it's as simple as I have a project here it's a duplicate and this does not have a slider in here but what we can do is uh just copy this whole section I'm just trying to show you like how you can easily reuse this in a different project so just copy that section paste it inside of the main wrapper and all of the content is in here now and then all you have to do is copy this bit and paste and then copy this bit and you're done I'm not copying the text code I'm just doing it for the logos if I publish this this is a completely separate project it will work so it's just um you know all it takes is a minute to now just reuse this in other projects you just really have to build it once and that's it as you can see it's working perfectly here and this project had none of this a minute ago all right now quickly gonna go ahead and turn this into a CNS setup so first of all I'm going to delete all of these slides let's keep only one I'm going to remove that ugly hover interaction from the image and now let's go ahead and drop in a collection list inside of splide so now this is inside a splite as you know we have three layers inside of this so obviously the first layer will be the slide slide the second one will be uh list and the first one will be track and I have a CMS for this right now called logos I have a images inside it so you can totally just use that I'm going to move the image here and get the images from the CNS of course okay there we go and it will work like I have absolutely no doubt saying that it will work let's see yep it is working and I think it is working just fine that's how simple it is to basically change that from static to CMS and now your client can just go ahead and keep adding and removing logos from here and you don't have to worry about it we can also use this with the uh the multi multi-image field so I'm just quickly going to go in and show you how to do that too it's it's obviously very similar but so just want to cover that scenario as well let's say you have a case studies collection I'm not going to create a lot of fields uh just one field for multi-image multi-image so let's say you want to show like a carousel of logos for each case study I'm going to copy this entire page wrapper and paste it in in the case studies template that I just created and I'm going to disconnect everything here and Link it to the logo's multi-in Edge field and right now I don't have any field so let's any items in here so let's create one so case study a and I'm going to add in all my Logos I have all of them in handy here it's first time in my life I've been so organized all right create um and here we have the evidence right here all right all eight of them and of course don't forget to move your code over so save and I'm going to copy the first part of this we don't need the text that's it it should work so it works with multi-image Fields um I can't decide if I should say multi or multi now whichever is correct but here let's see if that works yes it does why do we have two of those oh because we uh we copied this one as well this can go away it was a text uh Carousel which we don't need here um oh yeah break points uh one of the most important things uh let's get to that so uh if you have a breakpoints option of course so I'm just going to go ahead now and add it before we do that let's see what it looks like um like right now as you like on this screen size it looks perfect okay so as you go smaller it yeah it just gets squished it looks good to like I don't know 1300 so we're going to add in break points from that point onwards okay so the code for it looks something like this so after you're done with your auto scroll code you can go ahead and add in another one for breakpoints very similar format to that and of course don't forget to close the bracket I'm going to change this to one four four zero actually one three two zero just for this example and I'm going to change the per page to four actually uh one important thing to note by default it treats this like uh 1320 and above not 1320 and below so when you do 1320 and just add per page five that means it's going to show five slides if it's 13 20 and above so of course I want that and then I will go ahead and add one more that says one zero eight zero and here I'm gonna go ahead and make it four I'm gonna add in one more uh for 9.92. and here we're going to make it 3.5 you can actually use these decimal values but 0.7 and stuff doesn't work so to stick with 3.5 so in the multiples of five let's see so it's five uh per page when you are more than 13 20 and the moment you go below that it's four I think it's still five let's see where I've been changing that it's on the on the home page right okay so 13 20 and above it's five one zero eight to run above it's four let me see if that's let me remove this comments as well let me just publish that again just to make sure it's okay it is working it is working so it's uh it goes down to 3.5 as you can see when you switch between 992 and the one above that so basically you have to play around with this and you have to just basically uh what I like to do is I use this inspect tool to reduce my screen size I know it's a primitive way maybe there are better ways to do it but this is just what I like to do so just increase uh you can actually see the screen within pixels on top when you drag this so yeah just just make sure it looks good on all breakpoints and I'll just add one more option here uh I think it's called destroy so let's say you don't want to use this on mobile you want to on mobile you just want to turn it into a static simple grid so what you can do is uh um from let's add another one and let's get let's go ahead and say 320 and above so for all mobile devices destroy true and as far as I know it should destroy the slider and just turn that into a simple grid uh for anything between 320 to 992 actually it didn't is it gonna do that after 320 oh my God okay okay um so maybe I may have been a little bit wrong and I want to take a few things back um it looks like it's it's whatever this number is and Below not above so it's uh 1320 and Below it's 108 to run below so my bad it's actually so if I say 780 destroy true it should as the moment you go under 780 it will turn that into a grid and then you can you can install it how you want okay 780 and there we go destroyed alright so that's how you use breakpoints um it's it's very straightforward just uh display around with it and destroy it when you feel like it all right so uh the last thing and also like uh once it's been destroyed like you can go ahead and then uh probably style this however you want so you know for example turn this into a grid and I think it should work and the last thing I'm going to show is um for example sometimes your client might say that uh we want the slider to start playing only when you scroll into view and then pause again when you scroll out of view so that way it's like uh it starts at a desired point so it's possible to do that as well and that's what I'm going to show next so if you go to under 780 now now it didn't turn into the grid that we wanted it to turn into because there is a display block applied to the split list all right that's my list by track what did we actually okay we did it to the list so that should work okay so maybe we just need to use some CSS over right here so just maybe uh add in a media query and and write a custom style for display grid for any screen sizes 767 and smaller and give it up importance and that will definitely override the display blog and it will make sure that it looks like a in a proper grid style layout all right so for this last thing where you start playing uh the slider only when you scroll into view we're gonna use another extension so for example this auto scroll was an extension there is another extension called uh called intersection so I'm just gonna try and find that slide intersection and if you open that you will find the JS deliver link for the CDN you always need to make sure you import the right cdns for it to work so I'm just going to go ahead and add in that CDN here um okay I believe that's it so now that we uh that we want to make it play only when you scroll into view be no longer want to auto start right so I'm gonna remove this AutoStart true from here so here we just mentioned the speed and um we have let's see we have this right here this is super powerful so you can just copy this you can paste it here just after you're out of school and if you again look at it you will see the options here include auto play true or false but we are not using autoplay we are using auto scroll so we have that here too so I just have to copy that and say that in view auto scroll true and add a few other scroll I'll just scroll false and I believe it should and remember if we've removed the auto start we had that before to make the slider start playing immediately as you load the page but we removed it because we wanted to play only when you scroll into view so let's see okay it's not working maybe there is a small mistake somewhere that I'm not looking at okay that looks good this looks oh we didn't close the bracket there we go oh that looks wrong okay after we close the bracket there needs to be a comma so it's there now and that should work I'm fairly confident it should work let's see okay so it is playing because uh you are looking at it right now but I'm gonna scroll out of you and let's remember that this qce logo is right in the middle let's see let's come back five seconds later and let's see if it's still there okay I think it's been five seconds now it's still there so now it's only gonna move when someone's looking at it and I think this is very powerful because sometimes you may want to make sure your content doesn't get missed so you can always use this intersection method to uh to make sure that it stops IT pauses when someone's not looking at it so that was it today we covered a lot about what you can do with spline.js how you can customize it use the different options that it has to offer and create a bunch of really cool sliders and I would love to do this again and see you in the next one [Music] foreign

Channel: Finsweet

Views: 6,387

Keywords: webflow, splidejs, carrousel, logo, looping

Id: QdUCe2XLcXc

Length: 33min 19sec (1999 seconds)

Published: Tue Feb 28 2023