Infinite Carousel With Webflow

on today's video I'm gonna show you how to create an infinite carousel that just Scrolls and Scrolls and Scrolls endlessly this is going to be pretty awesome it's also going to pull items from the CMS so this is really neat stay tuned hey everybody what's up and welcome to another web flow weekly on one of my recent client project I had to create a carousel of images for them so check out this is the the website and on their careers page they wanted to have a bunch of images kind of from the office and the vibe and they wanted to be able to update those images themselves so I had to use the CMS for this however there was no way to create kind of an infinite carousel where they just scroll and scroll and so I ended up using basically just the carousel with some pagination but this is not ideal first of all there's no kind of like nice animation when I'm moving and when you get to the end of the images you see it's not like endlessly scrolling now you need to scroll back so this is actually not an ideal solution fortunately my friend Bob actually found out this jQuery plug-in that allows you to nicely scroll a carousel forever endeavor and has a lot of awesome features and showed me how easy it is to implement this within web flow so we've created a basically a template project for you to be able to clone and let me go deep and show you how easy it is to create a CMS infinite carousel so this is basically the demo website that we've created and web 'full for you and as you can see we have a carousel here I can swipe endlessly this way or I can use the arrows or I can use these dots whatever I want but it animates nicely and you can carousel forever that's great for testimonials office images team members whatever you want there's a lot of great use cases to use these infinite carousels so let me show you how this is structured within web flow so first of all on this page here you can see that basically we just have the the CMS list putting in all the all the items available here on the page it doesn't look very designed and you can't see the carousel right here but you can see all the all the items that are gonna fit into the carousel itself now on the page here we've added some custom code so you can go into the page setting and down here and here we're actually loading this owl carousel script here now the thing that there's basically two things that you need to pay attention to so first of all the names so the name of the actual collection wrapper you need to make sure that the names that you have here actually correlates to the names inside the code so make sure that you have the style correctly for the wrapper for the list itself and for the items themselves that way you know when the code runs it will wrap up all the items and arrange them in multiple columns or however you want them to actually show and then here below the actual collection list we have added an HTML embed that if you'll open up basically this is the styling of how the carousel is actually styled in terms of you know the spacing between them the the icons for the arrows or the the styling for these dots so everything here is customizable if you just change the code yes it is kind of like embedding of third-party plugins so you will need to change custom code CSS if you want to modify this or customize you know the colors but this is not like high-end coding that you need to understand basically you can see that you know you basically change the colors here so this is the the quarter this is for example the code for the dots right so you can see that it's five five pixels padding and that's the margin between them and that's the color or the the border that the dots have so it's not super complicated to adjust and to modify and I think this is very very useful for as I said a lot of use cases specifically you know stuff like testimonials or office or vibe images that you just want to scroll and scroll and scroll infinitely and pull from the CMS I think it's a really really great solution pretty simply simple to implement so check the link to the project below this video if you want to clone it and if you have any other questions about how to use this or how to implement some other kind of more sophisticated plugins into web flow let us know in the comments and we'll create a tutorial for that see you in the next video [Music]

Channel: Flux Academy

Views: 74,508

Keywords: Design, designer, ran segall, flux, startups, startup, freelance designer, web design, web designer, web development, web developer, web development freelancer, web development tools, freelance web developer, web flow, how to start freelancing, web design business, how to freelance, start freelancing, freelance web design, Freelance, freelancer, freelancing, graphic design, graphic designer, web designer career, web design tutorial, website design

Id: 2AtgrcVXQ94

Length: 4min 56sec (296 seconds)

Published: Fri Feb 21 2020