How to use Swiper JS in Webflow for beginners?

when it comes to create slides in we flow I always prefer swiper JS rather than using Bulow native slider or any other uh slider Library I found cerg is the perfect solution that we want because we get a lot of customization options and also if we want to have a CMS Spas slider we can easily convert swiper JS into CMS based so uh we have a demo here it's it's a very simple one um I can just show you that how much complex sliders you can create using swiper JS so it's it's a very simple solution I have two uh navigation buttons so I can click and I can um swipe between the slides right it's it's the most simple one so let's let's just go through all the steps to take in order to create this simple slider if you will learn if you will get to know that how to create this slider using swiper JS then you can create any slider any um with with with any layout so that will not that will not be an issue for you then so let's go to Let's search for swiper J yes and I hope my voice is all good yeah okay so let's go to swiper JS let's make the screen a little big and so there we have a few examples there you can just go through you can look at these examples or you can go to resources you can go to demos and there you will get a lot of uh examples there yeah so we have that what what kind of Sliders we can create what options we get so you can just go through all these demos so let's go to the docs and get started and on this page we need to um understand few things because we want um so what we will what what we will do is we will connect with this swiper Library using this script right so we have other options as well but we are going to use this script to connect with this Library um so just copy this one right let's copy this one go back to our site and go to the page settings so if if you want if you have only one slider on the whole website so you can just go into the page settings and you can paste this script there but if you have multiple sliders on different pages then it's better to go to the website settings go to the custom code area and you know that we can also fetch um this custom code area from using fin Suite extension so you can go there and inside the uh before body tag there you can just go and you can paste the script right so this is for when you have uh when you have multiple slides on multiple pages but in in our example we have only one slide and it's only the one page so it's already there yeah so before the body closing tag so this is the first step the second step is from this page we are going to follow this structure so this is the HTML structure and we are just going to copy this initial swiper JS script and we are going to paste it inside the script tag so just create this so okay so for example if this is this script is not there so how you're going to past it so just uh create the script opening tag script script closing tag and paste that script inside these opening and closing tags right so this is the initial one and inside the initial one so what we going to do is the so we know that our slider is horizontally placed right it's not vertical it's horizontal so the first thing we are going to do is we are going to replace this vertical with horizontal right so similar what we have done here and if you want to make it like it will run in a loop never ending process never ending slides actually so you have to keep the loop true so how do you know that what attributes we have what features we have that we can put there to make our slide work according to those those attributes so there are two ways to know about these attributes that at what attribute actually exist so the first one is just go to the docs and go to the um I think swiper core yeah so there we have all the attributes so if I just click on let's say that autoplay so it tells me about that how you can put the autoplay attribute right inside that script and how it will work and what options we have if I just scroll down a little so we have a free mode um actually free mode means that um the slide will not stop on a specific position it will just move very freely so you can just go you can just put it like you can just put this attribute there and it will just start working as you wanted it to work so we have the the grid warrian we have this manipulation add and remove buttons and we have a lot of lot of options there right the second way is and that is more convenient when you talk about uh from the visual perspective so let's say say that we have so just go and search for swiper Studio it's a paid tool but we will get some ideas on the Free Demo waran so there we can see that we get a lot of options there [Music] and now we know that these options actually exist right so for example I want to have three slides per view so I can just search for it so we have right there so for example I want some spacing between the slides so now we I know that actually this option actually exist so what we can do is let's go to chat GPD right uh let's create new one and hide this one right so I can say to the rgbd like um I am adding a swiper JS slider on my website right on my website page and I want assistance from you in finding the correct attributes okay give me a break I'll be back in 2 3 minutes okay so let's continue from here uh so let's say that I want assistant from un finding the the not the correct attributes we just want to have the attributes so let's say that I want the free um mode to be true I want to have three slides per view right so I'm just taking these names from the swiper Studio because I can see that slides per viiew so and we have space between the slides so let's say that and I want to have 16 pixels spacing between the slides right so this is how actually we can write so for example space between this is the way slides per view this is the way so let's copy these attributes let's go back and let's paste these attributes there right so free mode is true slides per view is two so let's make it three and the space between is maybe we can we can also do this in rims as well or we can also put this like 16 I think there is no need to put the the unit so 16 is one RM so let's go with 24 which is 1.5 and we have other options so I'm just let's make uh this script into commence so that we can actually see that what results we are getting right so we have horizontal we have remote blah blah blah and that's it um right so let's save these changes um let me just disable One Thing on page load let me just uncheck because this is a very weird interaction that I do not want to appear and also this one as well do not want it to right so let's uh publish and let's see what are the results okay so let's uh let's refresh this page so now you can see that uh we have we have three slides and we can freely move these slides so it's it's not important that it will stop in a specific position I can uh I can swipe and I can um stop at any position right I can stop at any position but if I remove let's remove one of the attribute which is uh pre mode or let's make it inside comments right so let's save publish and let's see what what results we get so let's refresh the page again so now now I can see that if I swipe and release so it's it's not free uh it's not in a free mode anymore right so this is how actually you can control this the slider and we have a lot a lot of options there if I go to um swiper studio um so I can have different slide effects that's interesting and I can just see that what slide effects we have I can remember the name I can go to J GPT and I can ask that please give me the attribute so we can get a lot of benefits from this free warant we have lazy loading we have uh virtual slides and anything uh if if you find that we have limited still we have limited options there so so you can go to the documentation you can go to anything um that you want to get implemented so and if you do if if you cannot understand the text so just copy the text put this inside Char gbt and and try to get help from from there so jity will definitely help you it will give you the attributes it will also give you that how to implement these attributes right so um so swiper studio and sgb will help you a lot so the last thing is let's also discuss the the structure right so if you talk about the structure of the swiper JS so let's go back to get started and there you will find we have the basic HTML structure the HTML layout right so actually we have have the parent element which is called swiper and this class is also being referred inside the script that we are using so you can see that we are also using the same class inside the script because this class will tell the script that this is the slider and where we are going to implement all the attributes and all the functionality um so so this is this is the first thing so I have created a block and its class name is swiper so you can and you have all options enabled for you to have any kind of customization you want right we have the swiper wrapper we have the swiper slide so this is the basic structure this is the outermost part the middle part and the innermost part which is the slide and these are all the siblings all swiper slide are the siblings these classes and if you see so this is the swiper button it's not inside the swiper but it's still working so that's that's the flexibility that's the benefit that we get when using swiper chairs inside this button because this class doesn't matter but these two classes matter swiper button previous and the next because we are using these classes we are referring these classes inside the script and there you can see the navigation we have the swiper button next and the swiper button previous so these classes are important if you change the name there so don't forget to update the names here as well right so and the parent is parent class is not important you can uh use any any name any relevant name right so this is the basic one and the the the swiper I'm the the script I'm using above is like uh for example I'm saying that uh slides preview is is set to Auto right so the benefit is that we can set the width of the slide by ourself it's not coming from the script so let's say that slides per viiew is set to Auto right and space between is 3% or you can go with 24 pixels that's also correct and let's go with like save and now I have set each slider width to 40% right so you can set the percentage you can set the values in percentage you can set the Val in rims pixels any unit you want to use even the view width so the benefit is we are giving that what is going to be the the the width of the slide because the important thing is you can control the width on different break points so for example you want to have 100% width on Mobile screen right so we can have that as well so for example on tablet we do not want 40% we want to have 60% and on mobile we want to have like 100% right so this this is the flexibility that we we get when we set slides per viw to Auto and we use the percentage values values in percentage rims any value any unit that you want to so let's try to publish this again and um let's try to see that um what is the difference so there we go so this is now the 40% of of the width of the screen of the parent actually and if I go to inspect element and if I go to Mobile waran so now I can see that that it's covering the whole width so this is interesting and this is important right so this was about the swiper JS and um I'm sure that I'm not missing anything so these so we are not using the scroll bar so maybe if you want to remove these attributes you can we are not using the pagination so if you want to remove you can but if you want to go through the documentation try to understand if you are not able to understand uh give it to chat GPT or go to swiper studio uh to see the visuals or try to go to char GPT to try to understand and we have a lot a lot of customization options in swiper Js

Channel: Ahmed Qayyum

Views: 1,348

Keywords: webflow, webflow website, swiper js, swiper, swiper slider, how to create swiper slider in Webflow?, What is Swiper JS and how to use it?, Building An Image Slider With Swiper Js, swiper js demos, swiper js webflow, How to use Swiper js for beginners, webflow slider, slider webflow, slider in webflow, webflow slider tutorial, webflow custom slider, webflow draggable slider, webflow infinite slider, webflow slider infinite loop, webflow horizontal slider, webflow swiper slider

Id: bj79hbKRCiY

Length: 19min 18sec (1158 seconds)

Published: Tue Mar 26 2024