CMS Slider in Webflow

hey in this episode i would like to show you how to create cms slider with webflow and vblocks so this slider is based on collection list which we have in webflow webflow we have a collection list and we can edit it here we can add new elements in collection list and it will be moved to our slider automatically this slider is also draggable with the hover animation it has an arrows which can change the slides and a pagination and all of that is built in webflow and we blocks where we are adding a javascript for a slider [Music] and firstly i would like to show you how to create this slider in webflow so the first element which we need is a collection list because this is element which will be connected with our slider so all the slider will be based on collection list okay i'm connecting it with the themes it's a collection with which i had it before this video and i have six elements in a collection list themes and i need to add three classes for the collection list wrapper collection list and collection item and these classes i will call in this example slider wrapper slider list and slider item and it's very important to add these free classes because later we will use these three classes to connect webflow with webblocks okay and right now i'm adding to the slider list layout flex and this way we have the horizontal view for the items right now in slider item i will add with 30 viewport width and 40 viewport width for the half and right now this element are still and not have the 30 viewport width so i have to add it flex don't shrink and this way they will grow but what is happening is that if i'll scroll to the right these elements are here and our website is moving we don't want to have this so in a section which is above the slider i will add a combo class slider section and i will add overflow hidden so all what is the overflow hidden is doing it's cutting everything what is outside of this box so everything what is outside of the slider section is cut because we have overflow hidden okay next thing i will add some margin for this item and i will add it a border i'll add in a border and i'll add a heading for example heading two to the element okay so we have it this way i will publish it and just to check how it looks okay and after refresh we have something but looks this way so we have collection lists which have the items which are just next to each other and right now in a way blocks i add a block which is inside of the animation section and it's cms slider when i drag and drop this block you can see that we have free elements slide wrapper slider list and slider item and it's exactly the same what i had here in a collection list so i have slider wrapper slider list and slider item and that's very important to have the synchronization between these three elements in webflow and webblocks and right now i'll connect way blocks with workflow using this webflow connect script so i will copy it and i will paste it to the footer in a body tag and normally it would be everything for the connection but in this example for the cms slider we have also here the information about the library so i copy this information and i will paste it just here and we have info that add library before code so it's very important to add these libraries before code it means that that these have to be above the code program will first read library and next script and css we can add to the head it's recommended to add always css in a head and javascript in a footer so we will do it exactly this way okay right now i can save this and i can publish i can publish our page with weblog's connection and when i refresh this is automatically a slider because we added this webblocks part which is connected with webflow and it makes our slider so right now in the next step i will add uh arrows our paginations and i will add these images okay let's start with the with the arrows so the first thing inside of this section header div i will add one more div and i will call it uh slider navigation wrapper next thing our section header has needs to have a flex layout and it can be horizontal and to the bottom next thing uh our slider navigation wrapper will have 32 ma from or maybe 40 pixels from the left and i will add an image with the arrow left which i have just added before this video okay and i will call it slider navigation slider navigation and here i will add the same class okay we can see that there is a space here so to remove it i will call it section title and i'll add margin bottom 0 okay right now i'll add a hover for this slider navigation and for the hover i will make it opacity 70 and i will add an transition for the opacity and this element doesn't have a cursor so i will trigger it for the cursor pointer and right now when i will publish it okay i also need to add these classes because we have a class next slide for for the element which is navigation next so this needs a combo class next slide and this needs a brief slide okay i will add 16 from the margin right and i can add this slider navigation also four pixels to the top to make it exactly perfect with this text okay let's publish and right now i can move this slider with this custom arrows okay perfect let's go to the next step is pagination and in our webblocks we have a pagination with a type bullets and the wrapper has a class imagination so right now what we need to do in a web flow is just to add a div which has a class body nation and for this element i can add also 40 pixels from the right okay let's see how it looks when i refresh we have imagination but i can almost not see it and that's because it's gray on default and we can edit this here in the styles so we have a style and css for pagination bullet and i can edit background from gray to white and right now we have beautiful white pagination okay perfect so we have arrows we have imagination so right now i will focus on this slider items okay first thing which we should always add in a slider item if we want to make it move to the item page is a link so it's a link block which will be connected with this collection list sub page and this link block can has for example class slide link block it will have with 100 percent and height 100 and i can move this inside of it okay right now i have to set the font color for this and it will be white and i will remove this line using this decoration block okay next thing i will add an image and to make it look like that and to make it grow on a hover i will have to use position absolute and position relative and right now if i'll add for the slide link block which is parent of this image position relative and i will add for this image position absolute and make it full and 100 percent with 100 percent height i'll move it to the collection list image okay and i will set fit cover okay perfect right now to take this text above the image i will create one more div which will have a slide content i will put this heading inside of this and if i will make it relative it goes above image which is absolute and right now i can to make it like it's here i will take this slight link block i will set layout flex to the bottom and in the slide content i will set with 100 i will set background white color black and for the link block which is parent of this i will set a padding for example 24 and for the slide content padding let's make it 24 2 and this will be a slide title which has a margin button zero okay let's take a look on that okay it has also more hate and it has a go to profile text on the bottom so to add it i will add a text go to profile i will set for example hey 140 pixels and to take it to the both sides i need to change the layout flex and make it vertical justify space between right now i can make it a little bit smaller for example 24 and normal font weight okay perfect let's publish it and let's check how it looks okay right now when i will refresh we have the slider with the images and to make it look like this the last thing which i need to change is also the animation which we have on this slider okay so to change the animation i will use also we blocks and animations which are related to the slider should be added here inside of the set styles so the first animation will be triggered on mouse over so this is the trigger which is in a basic it we have mouse over into and we want to mouse over slider item okay so when we slide over slider item i want to make image i can rename this class to slide image okay i will copy it i will publish republish the page and on this mouse over i want to set css i will delete it and i will use custom css property transform translate uh transfer scale 1.1 to the class slide image and on mouse out i want to set scale just one okay i refresh and it looks like that it's still not exactly what we want the first thing it's growing differently than here and that's because we should add for the slider item and overflow hidden so overflow hidden is cutting everything with growth outside of the element let's check how it will look if we add this overflow hidden okay so it looks like that but still if i hover all the images are growing and to make the grow only this one element which is child of this block which is hovered i need to take this block and use the class children so and we will do it this way if we have element with which is child of this and this means that it's child of this slider item then it's only and only then if it's a child then it's transforming with the scale and exactly the same here and right now when our refresh only this one element is growing but we still need to add a transition because right now it's jumping so transition we can add here in the webblocks we can add transition also in a web flow but in this example let's just add it here in a web blocks so i'll add transition 0.2 second to slide image and the transition will be for transform okay and right now when i will refresh we have the animation with the transition in this element in this example we had also a transition for this block so let's make it let's add an opacity for slide content so first thing i will add set css opacity 0.8 to the slide content which is child of this of slide item and exactly the same for mouse out opacity 1 and we also need to remember about a transition for opacity it can be 0.2 second and it will be for a slight content okay right now when i will refresh we have animation for image and for this box with the opacity okay and i think that's everything what is what is related to the sliders i think that version i will create a little bit more [Music] tutorials maybe one or two about to talk about the page in sliders which has a pagination a fraction and i will also add a pagination with a progress bar so very soon there will be more videos about sliders and if you like this one you can hit the like button or consider subscribing this channel to be notified about the new videos which are about web flow weblogs and creating design for websites thank you very much see you soon

Channel: WeBlocks Academy

Views: 2,054

Keywords: webflow

Id: c1RwuIxxcUk

Length: 20min 7sec (1207 seconds)

Published: Sun Jun 13 2021