Creating a cube slider with Swiper.js in Webflow - Live Stream - 11/01/2021

hello everyone john here with web dev for you here to help you build awesome websites without code in webflow welcome to my live stream if you're new to this live stream i do these every monday through thursday from 12 p.m to 1 p.m central and we cover everything webflow to building layouts creating animations and interactions we talk about design and all that good stuff i also provide support via the super chat feature in youtube so if you need help with your webflow site feel free to drop a question there and i'll be happy to help so on today's agenda we're going to work with the swiper.js slider we're also going to kind of work with the layout build so nothing too intense but i want to show the different effects that you can do with the swiper.js slider and then from 12 30 to 12 40 i'll field any questions about this build and then from 12 40 to 1 we'll just have a general webflow discussion and i'll field any super chats as well so i'll go ahead and get started and hope everyone has had a great weekend um but yeah i'll go ahead and get started this is swiper.js so it's swiper.js or swiperjs.com and then you can just click these few slides and click get started and we're just going to go through i'm going to go to the api documentation actually let's look at a few demos and you can see here it's just a really cool slider um the one that i want to work on today is like they have this 3d uh slider or this square slider hey rashid hey iamkar so let's see okay the cube effect so i want to create a slider like this so i think that should be fun and i also want to combine it with something like this so let's create a blog a blog post and then we'll create blog cards and then we'll turn it into a 3d slider or 3d cube slider and then we'll play around with other effects so i think that could be a fun uh kind of thing for us to do today so let's get started so the first thing we want to do is i'll go into webflow i have a blank project here and let me just hide this here so i'm going to amp up my energy i know last friday i was pretty just relaxed it was the end of the week and i had worked pretty hard that week so i was very tired so i definitely want to amp up the energy i you know i wanted i want my excitement of webflow to show i don't want it to seem like i'm just dragging along the tutorial so if you notice any dip in energy just say hey john like come on get with it or something i don't know but yeah feeling refreshed this week so should be a good week for uh these live streams so i'll go ahead and let's start let's create a blog post so i'll open up the cms then i'll click the plus here and let's just create a blog post collection i'll create the collection and let's add 10 items sample items so i like the sample items because they include images and everything so i don't need to do anything with the blog post we can see we have the the rich text we have the summary we have the images and a color so i can use this for the 3d slider so now that we have the blog post let's go ahead and create the slide structure so that's the first thing we need to do and we need to create this structure here then we'll bring in the script and everything else but first let's just work on the structure so it's swiper swiper wrapper and then swipe for slides so let's go ahead into uh webflow and hey what's up manuel hope crypto land is going well i know everybody's getting into crypto now i guess it's okay for me to talk about it actually i still feel a bit weird talking about it because i i don't the technology is getting better with facebook announcing meta that made me more open to talking about it because it seems like if facebook's gonna adopt something along the lines of crypto or something i do see it get it get gaining more popularity so you know i'm probably a late comer to the game but i just didn't trust the technology initially to get fully into it but it looks like it's it's starting to have some good use use cases and i think gaming is probably going to be the best use case for that specific technology anyway going off on a tangent there sorry about that uh let's go into yeah building the slider so i'll start with the section if you're familiar with my live streams you know i always start with the section we've been covering a lot of different um style what are they called um style systems uh the recent one i went over was the client first i was recently looking at flo mingo and hatch i did look at the style system but to me it just seems like he has a lot of classes which is fine um i think that's a cool way to do it like if we go to the if i open the live site we go to the documentation we can see it pretty much has a class name for everything so if we go to layout and we go to container he has a class name for every type of container so that's fine you know like nothing wrong with that and he has a class name for you know different display settings and and all that good stuff so rather than going to webflow and clicking yourself you can just type in the class name um so that's an interesting way to do it i'm not going to go too in depth into this style system but it is out there if you're interested it's a hatch by flomingo yeah so cool so let's get back into the slider let's work on the structure so we have the section i'm going to set it the min height to 100 vh i'm not going to add a container because we're just going to add the slider in the center and i'll set it to flex flex center center or flex center center and then we'll go ahead and add sorry about that that i turned off my notifications there which i might do really quick we don't want any pop-ups at the moment okay cool all right uh menorah yes crypto's going quite well but i try not to put too much time in it it's addictive how happy it's going to be very big in the future yeah definitely i like to focus on things that you know that feel like a craft as well because i know people can get really caught up in it so to me building websites as a craft making music as a craft anything that can improve yourself as a person i feel is uh rather than chasing something but i know crypto is is pretty hot right now so i you know dabble a little bit in it but uh yeah we'll we'll continue here yes thank you manol uh appreciate it yeah gotta stay focused um so we have the swiper swiper wrapper and the swiper slide so let's go ahead into webflow and we'll add a div and for this i'll say swiper yeah we'll just call a swiper so we want to give it the class names and let me organize my tabs here uh we want to follow this class naming convention so swiper is the parent then we have the swiper wrapper and then we have the swiper slides so we have swiper and then i'll add another div block we have the swiper dash wrapper and then in here we have the slide so here i'll say swiper dash slide uh no don't want the slider add a div block and here we'll say we'll call this swiper dash slide okay so we have the swiper swiper wrapper and the swiper slide so following this wireframe we're going to create this card in this card let's let's see how i want to do this um yeah okay so yeah we'll set a specific width and height to the slide so i'll say 500 by 500 that's too big let's do 400 by 400 so that's our card uh let's corner the edges so i'm gonna say 30 pixel radius might be too much but we'll play with it for now then for the background i'm going to get the background or actually in the swiper slide we're going to add a collection list and i'm going to get the collection list from the blog post that we added and for the element settings i'm going to limit it to one just show one and we'll start at one perfect okay then for the so the collection list wrapper let's just give it the class name collection list wrapper let me set the position to absolute and full and for the swiper slide let's set the position to relative then we have the collection list give the class name collection list and we'll set it to absolute and full and then we have the collection item same thing set it to position absolute and full okay i think we might only need to let me see if this works no we would need to collection item collection list i think that might work no collection list yeah no we need to set absolute to all of them all right so that looks good collection list all right cool so now to the swiper sl or to the collection list wrapper i'm going to get the background or let's see the collection item yeah the collection item let's get the background image from main image okay get bg image okay for main image then we'll go into the and why isn't this collection item filling the space so do i need to say 400 by 400 yeah all right we need to do 400 by 400 so actually what i can do is remove the absolute positioning from the collection list and not the swiper slide but i can remove the width and height from the swiper slide because we're inheriting from the collection item here and then we'll get to the background we'll set it to cover and center perfect and let's set the radius to 30. okay that looks good all right so we have the image now what i can do within the collection item i'm going to add a div block and i'm going to set the position to absolute and full okay so what happened here let's see collection item okay cool yeah so we'll remove the absolute positioning from the collection item all right that works so we don't need absolute positioning at all right okay so for this div block i'm gonna set it to yeah for this okay for the collection item i need it to be relative and then this div block is gonna be the color overlay so i'm gonna say um color overlay and then we'll just set it to kind of a black and we'll make the alpha like 40. okay so that just gives us a nice overlay and for the collection item i can set the overflow to hidden so we don't see the overlay coming out of the collection item all right so let's uh let's see here oops you saw my email that's fine um let's see let's go into here all right so we have the date we have the title and we have a paragraph okay so let's do that and for the collection item i'm going to set it to flex vertical and justify bottom so we start from the bottom and then i'm going to say we're going to add a heading i'll go ahead and make this an h3 heading now we didn't create a style guide which i like to start with but yeah we'll just dial all h3 headings and we'll set the font to white and let's make it um let's use inconsolita sure okay the heading let's see the color overlay there we go and i want the heading to be above the color overlay so the color overlay we'll set as the index of or set the all h3 headings let's do relative okay yeah so it comes to the front and actually i don't want to style my h3 headings that way so let's do that and i'll just call this we'll give it a custom class we'll say card dash heading or uh blog card heading and then we'll set it to relative okay and then we'll get the heading from the blog post name awesome okay so now we'll add a paragraph okay so i'll add a paragraph and we'll bring that paragraph right here we'll set all paragraph text to white and we'll say blog card paragraph okay because this because this isn't specifically for a client i didn't create a style system initially i just went into it hey sorov hello uh relative okay and let's get this text from the post summary okay that's looks okay kind of a lot of text but we'll roll with it and then let's add a date so we also have a date so we'll add a text block and then this i'll say blog card date okay and then we'll do something like this and we'll make the text white set it to relative okay and then we'll get the text from the published on date so we haven't published it so we don't get that and then we'll add one more element we'll add a button and we'll link to the blog post current blog post okay and we'll say blog card button set it to relative so it comes to the front and that looks good so for the collection item let's set it to um vertical and justify or align start okay then for the collection item i'm going to add some padding all around so it's nice and centered and then i'll say read more here and we will give it border radius of 30 and let's change that color something like that okay so we can make the color overlay a bit darker or better yet we can add a gradient let me see let's see if we set it darker yeah let me add a gradient let me try that so um oh wait no yeah okay delete this click the plus we'll add a gradient and we'll start we'll reverse this so let's swap it and then the white will lower the alpha there we go perfect all right cool so there's our card it looks good so all we have to do now is copy the swiper slide four times one two three four and for each collection item or collection list we'll just change where we start so i'll start at two and for this one we'll start at three and for this one we will start at four okay so what happened here collection list show one start at three collection list start at two so one okay cool all right so there's our different uh collection cards uh how to get work in web flow um yeah just learn it and you know post your portfolio if you have one and you can get work and let me change the color here something like that actually now black is fine that will stay with black all right cool so we have our cards now we can bring in swiper.js to make the 3d uh slider so we want to make uh this slider here right so let's go into webflow i'm gonna go into getting started here and they have a cdn script that i can grab it is let's see here we go um so we want to bring in the style sheet so i'll copy this go into webflow go into the custom code go into the head section paste that in there and let's just format it a bit better there we go and cool and then we want this script here in the before the body tag so the script tag goes before the body tag and the style sheet goes in the head section so i'll click save and let's go ahead and initiate or initialize swiper.js so i can copy this code right here so this is how we initialize it go into webflow and then in the before the body tag just open up the script paste this code in there and then i'll close the script all right so these are the settings for our slider um let me just try to leave it like this and then we'll add we'll go into the documentation and get the code that we need for this so let me look here so this is effect cube and let's see so i'm gonna have to okay effect uh cube so let me go into the documentation here and let's look in here and cube effect okay so for the cube effect we need to add effect cube and yeah so i'll just copy this here go into webflow and constant swiper so let's just paste this code in there so effect cube cube effect slide shadows false okay uh yeah let's try it i might have to remove some of these settings but let's go ahead and see how it looks definitely has a great workaround to create real cms based sliders interesting all right so let's see yeah something's not working all right so let's go back into webflow and let's see cube effect be sure to have the effect parameter set to cube in order for this to work cube effect options okay so something is up i definitely did something wrong here so let's see cube effect oh okay now i close the script tag that's good script source okay link style sheet that looks oh space here i don't think that'll have much of an effect but let's try it yeah i'll check out the finn suite cms based sliders i know some some users definitely wanted that feature okay so for this i think i think i have to set a width and height to the slider maybe we'll see pagination let me try to remove all of this and okay so that should work swiper cube effect and let's try it hey john how's it going not managed to catch you live in a while due to the time difference but catching the replays i'm still i left my ass off at a few episodes back when you had the hiccups yeah uh and that was one of the funnier episodes for sure um yeah did not like those hiccups all right so i think i have to set a uh an explicit width and height to the slider to this wiper here um so let's try that let's do 400 by 400. and let's see how we go i think that was the issue i had last time too like you have to set an explicit within height yeah that's it sweet how cool is that oh my god then click read more all right we don't have a cms page for that oh man i'm loving that and look at the date is on there oof dopeness uh 20. let's just have some margin from the bottom so let's quickly create a blog post template page um so for this we'll just add a section and i'll call this section blog and we'll add a div and we'll set it to uh we'll set it or let's add a container div container oh i did it again container and we'll call this container and we'll set a max width of 1440. for the blog let's add 5vw from the left padding for the section 5bw same from the top we'll just add 5vw for now and then we'll add the blog heading make it an h1 great we'll get the name from the blog then we'll add or you know what better yet i'm not going to stop get too much into style styling here we'll add a div block this will be the the blog main image and then we'll get the background from the main image and we'll set it to choose image we'll cover it and center oh cool and then we'll add a border radius 30 pixels looks good let me say blog heading okay so now i'm starting as i'm do using my my own method now i'm starting to see the benefits of like a system like client first i know it's weird for me to say that because i've been you know not great with it but um but i can start to see like you just have pre preset padding and margins so you don't have to worry about creating more classes for your headings and that can oftentimes lead to more classes when you have different headings on different pages and you need different margin for the different layouts so i can see that we'll see if i start switching over to a system like that but for now i'll just keep going so rich text let's get the rich text from the post body and yeah i don't know what's up with that anyway uh the blog main image let's add some yeah but you see here like if i wanted to add margin to the bottom of this image i'd have to wrap it in a parent using a system like client first [Music] here i can just add margin to the bottom of this image and we're good to go so what did i do here i think let me go here and all each one headings okay i don't know why that spacing looks like that anyway but now we have you know some you know some type of blog page so if i go back and i publish sorry about the dog you probably see somebody outside um and there we go and then if i click read more we go to that blog page how cool is that nice you can go back click read more that's an interesting way to go through blog posts i like it uh so let's see let's see if i can get it to infinitely rotate so let's go back into um swiperjs.com and let's go to the documentation and initiate so let's see if i do loop true if we can get a looping um cube so here uh i'll just keep effect uh we'll say loop true and so loop true do we have an auto play can i get an auto play navigation pagination we might want to add navigation as well so we'll do that too auto play so auto play equals so auto play true let's try that so we'll say loop true and we'll say auto play true true true and publish and let's see how we do and then we'll add some arrows and we've got a cool cube slider so the default might be two seconds let's see nothing yet nothing yet sliderjs is really nice so you can apply all those slider styles that easy to slide in webflow that's awesome yeah it's yep that easy so the default is five seconds so i'm not sure let's change that so autoplay let's do that autoplay well you have a lot of different options here for autoplay that's nice oh you can also add oh that's cool you can change the uh the swiper delay the swiper autoplay to different speeds on each uh slide and we can do that in webflow using the data attribute property so what we might mess with that but let me try messing with this first here so we have autoplay let's see if it works um so i'll just do you know paste that code in there auto play delay let's change it to one second it's going to be really fast um let me format this a bit better and yeah let's try that out so loop true auto play yeah it should should work unless it doesn't work with the cube which it might the cube might just be a bit different and then we can try one more effect too before i close it out as far as the different effects here oh perfect and it loops amazing and then i can grab it once you grab it it stops auto playing but we have a loop it completely loops oh my god if you want to get super fancy i mean or even more like if you wanted this cube to be like the main attraction of your site you could do something like i don't know 800 by 800. no not only hold on 400 by 400 and then the collection item i guess what i would want to do here hold on let me remove this and the swiper slide or the swiper 400 by 400 swiper wrapper this would want to be absolute and full and the swiper position relative and then the slide also absolute and full no no no never mind no i actually think let me undo that so let's see swiper 400 by 400 and then the collection item yeah 400 by 400 okay but let's say we wanted to do 800 by 800 and then the swiper 800 by 800 that's way too big you could do it in percentages too um but let's see how this this looks wow that's so cool nice i like that alright so actually i do want to showcase because i know we can do this so swipe a wrapper this would have to be and then swipe your slide and then swipe your collection list and then collection item so i'm guessing we have the swipers uh this is relative so this should be relative oh wait a sec no no we do need to apply the explicit width and height to each collection item or do we hold on okay so swiper swiper swiper rapper um so we'll so that's yes collection item so let's remove this and set it to absolute and full okay then the collection list will do absolute and full and then collection list wrapper let's try the absolute in full swipe or slide absolute and full there we go and we'll do it for this so let's see if we still get the same effect basically all the slides are on top of each other now but that's okay we should still yeah perfect so now if i change if i make this a percentage based if i say i don't know let's do 50 uh 50 by 50 percent uh no how about 50 vw yeah 50 by 50vw so now it should be a responsive slider let's see yep so we have a responsive cube yeah now it's responsive coolio we have a responsive cube you would want to change the text though on smaller breakpoints oh and i said this should be 50 vh not vw so 50 vh by 50 vw there we go wow this is a fun slider um yeah i'll go a little bit uh it could be lagging rasheed uh let me close some of my tabs here i don't know if that's really going to do much but yeah cool so now we have a completely responsive cube slider loving it all right cool so that's done uh let's see what else just for fun let's try one more effect because they do have a lot of demos here so let's try let's go back here and look at the demos uh hopefully the stream is better now they have some other cool ones i like cover flow cover flow is actually a really cool one um let's look at cards oh somebody was asking me about this actually a kind of a client so that'll be a fun thing to do i can do it with swiper.js and that one's cool yeah let's make cards effect cards let's see so documentation okay um okay sorry about the video um hopefully that picks up shortly let me see if i have any windows i could close um okay yeah hopefully it's a little bit better now um so let's go to the what's the creative effect flip effect cover let's do let's try the cover flow effect this could be nice um so effect cover flow yeah let's try this one and so i'm just going to comment out this code paste that in there let's do the slide shadows i like the slide shadows and save one thing i haven't done yet is add the arrow so we'll do that next um yeah i don't know if i can fix it uh rasheed it's kind of like yeah i think it might be youtube i don't have many tabs open so i don't think that's the issue um yeah so okay so last thing we'll do is add the arrows um so for this we'll just in the section we'll add a div block i will say left arrow and we'll say 100 by 100 i'll say position absolute and position it to the left and auto auto top and bottom and let's give it a background color we'll give it the same color as this there we go and radius we'll set it to 50 okay we'll give it some margin from the left cool then i will copy and paste duplicate this we'll call this right [Music] arrow and i'll position this to the right make the top and bottom auto and then give it some margin of 30 from the right all right these are just example arrows so you know i'll set the pointer to the cursor to pointer and great so let's go into swiper the documentation and let's see here okay navigation okay so we already have that in there so i can go in here so navigation swiper button next and swiper button previous okay so okay and then i'll say let's try left arrow left dash arrow and right dash arrow okay save and publish and i'll preview and they don't work so console unexpected identifier so i think i did something wrong here in the code ah yeah i need a comma after this is the video any better or is it still lagging okay the arrows are not working yet an unexpected identifier let's see let's see here okay so we have loop true delay now oh navigation arrows okay yeah this should be commented out there we go left arrow right arrow okay so right arrow okay nice and we'll preview there we go noise still lagging sorry about that yeah um cool so if it still lags i might just end it a bit early um i do like the cube effect so i'm going to go ahead and go back to the cube effect um this was the cover flow so loop and then we'll go back to the cube effect nice and then we'll call it a day uh yeah so let's see yeah i can see it's lagging here all right nice all right so i think i'm going to end the stream here um oh it's not lagging for me okay all right cool if it's not lagging um then i'll continue i just don't want it to be like a weird experience of um watching a laggy video but yeah there's not much more i have for the live stream um we can end it early you know uh i'll leave a few minutes for questions or discussion but yeah that's it we use swiper.js and uh i mean we could do so many more things i just don't want to get too uh what is it i don't want to go two out there with some of these slide sliders um but let's see get started also get some more demos let's see what they have so effect cover flow we went over that flip effect that's cool the card effect effect creative that's cool yeah oh nice awesome happy to hear it um let's see flip cards what's cards let's do cards and in the meantime if anyone has questions just feel free to post um but we'll do cards one more you know one more effect here why not uh cover flow cards effect so cards effect and yeah let's try this effect cards just to see how it looks so i'm just gonna comment this out and we'll add effect cards and we'll say slide shadows let's set the slide shadows to true cards effect um yeah let's try it i don't know if it's that easy but it could be save and publish oh my god wow it was that easy i mean the back and forth the next and previous slide isn't as graceful but if you click and drag that's amazing click read more there's my blog post cool let me go into here for a sec i have to style this a bit better background image oh no that's center yeah i want it to be centered nice all right yeah that was swiper.js with the cms that was a lot of fun so one thing i i want to mention and moving forward so one thing i'm noticing about a lot of these sites i'm taking a look at is the design is really great like some of these uh sites like we looked at re-loom yesterday and they just have really great design and for example like these gradients so i'm diving deep into gradients i don't know if i'll cover it this week but you know like these gradients that they have here and that grainy effect i'm gonna work more in some of my live streams so we can level up the design of some of these demos right because design is such a big big part of web development that we want to at least i want to start leveling leveling up my design because i'm getting super inspired by relume and flow base has great design uh timothy rix has great design and i just love these gradients and look at that a moving gradient that's so dope like just amazing so yeah definitely gonna work on you know my design skills as well because it's not just about development so yeah props to ray loom i mean it looks like are they brothers or just maybe friends adam and dan um but great stuff great stuff really like it um yeah good stuff so webflow yeah sweet um but yeah it's giving me inspiration from my site my site right now is just super basic i'm pretty aware of that it's just text some images and some icons uh but this is gonna be leveled up for sure it's easy to you know access different things like i have my super chat i have a few resources that you can look at and then i showcase my my profile here it has a lot of different um layouts and interactions so you know that's going to be a major goal for me is just to level up how my site looks level up my demos just to bring even more to the the webflow community and yeah i want when someone looks at my live stream too to be impressed with design because you know we do have some cool effects like card effects and all that but you know package it with nice design and you can really impress users um yeah so i'm not gonna go on too much longer i can end it early if anybody has any questions i'll leave like a minute or so for questions uh but yeah definitely enjoyed this live stream so just to recap we built the swiper slider it looks like this the the layout is swiper then swiper wrapper then swiper slide and in each slide we added a collection list we limited the collection list to only show one and then in each slide we just changed where we started the collection item so we have two three and four right over here and then we um yeah we created uh this blog post cms added some sample content and then grabbed grab that content for the cms as you can see here and then we added the swiper.js code here in the head section and and the script section here and we use the documentation to make a cube and use different effects so i'll end it with the cube since it's my favorite effect and and slide shadows let's do slide shadows true for the cube cover flow cards uh yeah and then we did have auto play loop true and auto play nice so dylan i meant i missed the session because the class went back in the cake can i put the super chat through john um let's do it tomorrow dylan uh because we are out of time and i don't want to start looking at something right now let's see cube loop true cube keep effect effect cards okay so what happened here let's publish it one more time yeah i heard about yeah the times in the uk has has changed nice awesome so that's going to be my my uh youtube cover image i'm gonna do something like this to get that cube effect going all right so i'll end it early uh dylan feel free to send the super chat tomorrow and uh yeah we'll go over that super chat thanks everyone for watching have a great rest of the day and see you tomorrow peace

Channel: WebDev For You

Views: 467

Keywords: webflow, web design, web development, live web development, live web design, building a website, learning webflow, webflow for beginners, website live stream, webdev for you, webflow live website build, webflow flexbox, webflow layouts, webflow web design, swiper.js in webflow, swiper.js, cube slideshow in webflow, swiper.js cube slideshow

Id: X_v7zeQ1z9Y

Length: 53min 10sec (3190 seconds)

Published: Mon Nov 01 2021