How to Integrate SwiperJS Slider in your website

hi everyone welcome to my youtube channel i'm paul in this tutorial i'm going to be showing you how to integrate swap.js in your website or web applications all right shop.js is a is a library for creating a modern swiper in your web application so in this video what we're going to be integrating the swap.js and as you can see this is the uh swapper js well and this is a card effect i can see a very cool library for creating swiper also swiping back swiping back swiping back swiping back all right and i'm going to be showing you how to how to use the api to to in interactivity with external elements like all these buttons like this and you can also scroll to an element scroll next linux and we're going to be using different effects i'm going to be using different effects i'm going to be using the slide effect um i'm going to be showing you how to use this slide effect and other stuff and it can also scroll by itself if i should leave it for like four seconds it's going to screw by itself um it's going to scroll okay he's going to swipe i mean he's going to swipe myself i think and i'm also going to show you how to do the um the the ash the ash navigation i'm going to show you how to do actually actual navigation i'm expecting it to school by itself okay if it's not scrolling by itself okay well i'm going to show you how to scroll by itself how to do the auto scroll i can see the ash here was changed from slide one to slide two so if i click it again it's going to change it has changed from slide two to normal ash now right in the back slide two slide one slightly slide okay so this is what we're going to be doing in this tutorial before we continue if you haven't subscribed to my channel yet please go on and subscribe okay let's go to the full tutorial okay guys so and this is the um documentation and website for java and to download the swap projects on other stores so this is the and i'm getting started and basic documentation on this page okay so uh you want to install somebody let's call me copy this npm install sniper and paste it on the command line if you have node.js installed and it's going to be installed and after it has been installed you get like a inside the installation folder of the swiper you get all these bunch of stuffs installed okay after installing the you can now go on and java in our javascript so all this stuff are for maybe you are using any framework like react view and other things that are supported angular so these are for the documentation for the code and the one that you're using is tutorial so this is the one that we are going to be considering this and this okay so after downloading it so this is the project folder and this is the what i installed the server.js that uh that i've installed so i'm just interested in two files out of all these points of files so this super bowl domain.js [Music] okay now after that let's go to the code now after after that so i'm including it in my in my in the in the project in the project so i've included including link to the javascript and status also okay so then you can now just copy from there and copy this layout this basic software layout so if you are going to do anything shorter it must have this layout because of the swapper wrapper and the surface like glass and also this republic determination then the swapper button previously this can be changed you can change this to anything in any class you you want and surpass this once you can also change it to any class you want to understand also well this is my first slide is it can be changed you continue to enter this software up also the software you can also change this to anything you like okay now let's go to the code on azure space distort here yes basically i just need a intuitive formatting and stage and okay my browser the stuff is going to be saving by itself because i'm using live server okay so if i click on save here so it's going it's just going to go on to the browser and as of now it is just it has initialized right here i will show you how to initialize this and you can decide to write custom css for the snipers to suit your your taste okay so you can just come here copy all these ones but avoid avoiding it you know now let's go to javascript file now i said i needed to download yes the swapper so in channels you just declare the variable then new swiper then include the software container that i want to utilize this swapper container to continue to anything you like you solve for one and changed and now what i just did here what i enabled are just some basic stuff like the direction the pagination the navigation okay so those are just what i enabled it and that is why it's doing all this stuff but i'm going to fix that by in putting it inside its own container so i've waiting is a written css for a div with class container it's a div for a divorce class okay okay now we should go to the brother i can see it has he's not id i think he's still giving the error one okay because i changed because i changed the class of the css to cipher one it is not which is not in the css okay so let's go to the css and let us change this to okay hey let's change this to 5.1 and save it and let's go to the browser and check it okay all right maybe we are still getting an error let's see okay you know alright move let's just try to give you swipe.one actually i contain this one also too [Music] now this one is not a after clicking on button again after reaching the end it's not going back to the first slide because the loop is false the parameter loop is false i'm going to explain it just in moments okay now you can decide to change the direction of the um stop to horizontal which we are interested in which we are going to be using so horizontal all right so if you wanted to go back to the first slide after he wanted to go back to the first first line after clicking and this fold button we're going to enable the loop i'm going to set the loop to do okay now yes all right so we click it's going to go back to the first slide so that's that okay now let's check the in the [Music] the parameters that we can pass in into the swap pages now there is a very important parameter that you can pass i can pass in which is the effect so the default effect is swipe or slide the default effect slide okay now regardless enable card for that but before we do that let's try to make our card look a little bit cool and we are going to be including all these images inside our two img firstly okay so i'm just going to go on and uh include all the images exciting okay so i will play the images inside it so i've included all the images inside inside and swipe up now you can just save all and take a look at our slack swipe up at the front okay so this is our swipe right now are all the images images okay all right so you can decide to include and change the effects of the of the um swiper to cut let's change it to cards and let's see what's going to happen i also a good page i can see the store has changed now so yeah okay so that starts effects the colorful effects will show more if i should enable the slide by view there's another parameter which is slide popping you can change the slide value let's say unchanged so this is where the cover flow effect is going to it's going to show so this way i'm going to see the effect of the cover flow very well okay so that's light part you can also set the slide value in this loop i can see it is three slides okay so that's that and there's another one which is uh [Music] cube let's see and all right so q so this cube so here's q effects it has cube effects okay so and you can decide to disable this the forward default clicking and the sliding of the sliding forward and back and i decided to disable this so we can disable it now so we should click that click on this it's not go font again as you know go back in and if we try to use our mouse to slide it to no slide so that's if you want to disable that let's just change this to slide or swipe so it's right okay now another touch move is you will be able to use the mouse to swipe it but we'll be able to use all this and once we okay i think we enable the touch move [Music] move it for you to use all the songs so it has a loud touch move and you can decide to set the image because it's initialized by itself automatically you can decide to disable the automatic the self initialization i can also set the initial slide and what it is which it is zero index so these the index zero is for the slide one and index three is for the slide four and you can decide to enable the loop i will talk about it let's bring this movie from there also and the pagination is just for the pagination which is this g it is this all these things that you cannot [Music] so these are the paginations let me just enable this stuff [Music] so this imaginations so all right so that's the pagination so you guys create you can create your own custom pagination calculate your own custom pagination and [Music] and including custom um here okay now the uh navigation which is which are this navigation which are these buttons here and this button is to back um hot voting so those are the navigation button you can create your own navigation button also and give it a custom you can change contain the class name to anything you like and just make sure the class name the next button class name match the next element class degree and the previous match you will need okay now the scroll back is the there is enable disposal okay this is google and let me also uncomment it you see this browser all right so this is the discover [Music] you can disable it and also you can remove it and simply there's also reload images if you want the image to be reloaded or you don't want the image to be preloaded let's just test let's check what the period does okay if we are if all these images are on another domain and we are using beyond server so if you it will slide to the next image it will it will load it will not load until you slide to the image it's because uh this is on the coin server and it's on you can see what is why it is very fast okay so prevent clicks is for when you have your swiper slide it links if you wrap it switch and the hf link if you have a tag you have it with the enter so and and you don't want the uh you don't want the link to be clicked when you are when you are sliding the swipe up then you are going to enable this uh prevent click to okay sniper v we've talked about that the space between so speed between this fight the speed and the uh if you want to spend center the slide let's try to center the style and change which will work by the sniper view okay so i can see center slide to let's start to check into force and see the effects okay center slide bound also is also you can also set this also center slide bound okay and i just set the space between two changes and see what's going to happen okay that's nice all right i can see this is the this is the first slide here at the center is the first idea center so because we enabled that is what we are saying the next the the last slide at that space okay all right this is the effect of the center slide and the center slide bound you set it to the only space at the end of the slide here so you just push everything in okay so those are the effect of the stove and one of the most important parameters breakpoints if you want to do uh some stuffs if you want to do some stuff when the [Music] when when the browser at different screen size maybe 320 48640 and you can decide to change the space between you can try to change it to maybe you you don't want the slide to be sent out you want to use this knight to be centered i think 20 or you want to remove some effect at a certain wait uh i am screen which you can use this breakpoint to set it you guys just click on to set it okay okay so that is that and and again there are there are properties that you can use to that you can like i use with a swiper you can check if the swiper is at the beginning okay so before we do this uh property i would just like to attach an event we can also attach events to swiper so let's say swapper dots on and then let's say and slide change attaching an event suite and slight change then our function i love using our function okay so on slide chain i want to check i'm going to i'm going to use console.log you see if it is in beginning swiper dot dot is beginning so it's going to return 2 or 4 and swiper swiper dot is empty and you can also get these slides also by just calling the swiper dot slides okay now let's save it and let's check it in the browser and i will i'm just going to bring up the console now okay so he's waiting for the on slide change now if hitting 2.8 is not defined okay change okay now if we should stretch the next one now i can see false false the the stuff here is like okay this is try to [Music] okay so i just going to set the stuff here beginning send and subtitles type just indicate it okay let's save it and let's go back and check okay so i should put the next one say swap adult is beginning force is end false what should go back now is beginning to this end false you can see then some part of slides and away so all of them all these are all the slides so if you want to do you want to perform any uh any actions on the slide you want to perform any actions on the slide so this you can you can actually do it with this okay so you should go to the let's say we reach the end of the we reach the end of the uh i start to reach the end of the slide all right so top out is end to okay so that is that and there are also some methods now but to do this to use this method we have to include buttons and top here let's just use our console now because what i've done responsible i'm going to include some external but in an external button here that you can use to interact with this slide with the swiper okay so the buttons are going to be included there so let me just copy the styles of the let me include the buttons and the here just in a moment okay so i've copied the buttons to the uh articulate the buttons and the important container to be doing the previous slide to number four and the next you can decide to change this one to slide to any store now okay so and then now let's check that in further just check them out okay so these are just the defaults buttons that i say that's what they put a default button so um and this time it's i didn't give the monster okay okay so just um get these videos next and it's like okay so we're going to use them as say documents dot please select dots previous dots [Music] okay so i'm going to say subscriber dots like period live videos and you can just gonna copy this for the next button also slide in it's going to be slide next tripod slide mix so these are the methods that i can use to work with the uh swapper js with an external element this is like then i'm going to say slide through then the first parameter is going to be the index which index index 3 as because it is zero index it starts from zero so the three the index three is the fourth item okay then the speed let's say 400 let's say 400 okay all right so let's save it and go to the browser now if i click on all this button now you see it's going to slide next it's not going to slide next lightning as you click on the big piece here slide backward slide next it's very nice and also slightly let's see so yes so it can slide through and i see it is very fast so you can slide to slightly number four slightly okay so that is the methods and also and you can attach an event but so this is an event that i attached here on slide change that we used to check for the beginning is beginning its end slide and there are also some other cool events that before initially not to do anything before initialization of the uh initialization of the strategies and click on which end and which beginning and slide change which is the one that we did here sky change okay so we're going to attach the on which end event or which beginning event so you can also do this and i want to talk about a very important aspect which is which is last thing we are going to talk about the actual thing so you wish you go to the documentation here we come to documentation and go to the uh api recommendation okay let me just pull down [Music] all right so you want to include parallax whiskey [Music] please actual team so okay the actual navigation all right so this is the ash navigation layer so to do the action application you have to set the uh navigation to this navigation is copied and included you know [Music] in in all the in all the slides he data slides so we should include it another slide i'm just going to include it in those three slides [Music] what the ash routing enables you to do is like if you are creating a custom slider with a slider with a full beach a slider with a full page so everything is slider with the full page and you don't want um like you want the user to to be able to go back today so the actual thing we enable the user to go back to the to the coin slide after reloading the page and it's going to it's going to set the it's going to reset the history the browser is doing if you said the browser basically in case if the user go to navigate to another page and if the user should click on back button if you go back to the to the uh to the ash without to the ash url of the last of the last slide of the swiper so that is useful in a maybe in the custom web application so that you click on next now as you can see it has changed it has uh included the the ash routes here that include the so i click on back i can see that's changed back to one slide one slide two slightly okay so that's that's ash routing that's our shouting so there's no idea [Music] so you can you can use the actual thing the custom web application all right so let me just talk about a and talk about what we are looking at so it is the of super api documentation so there are a lot of other parameters that you can like and pass in into the uh into the swiper that i load you just come to the [Music] swiper api here you see love stuffs so just go on and play with most of them and other methods too i can't i can do you can get the active in index you can get the air you can you can do some things like check check if the alarm slide next is enabled and allow touch move [Music] this one is to check the the mouse events of the store all right and the methods too there are also methods too so you want it to change direction or maybe from that air vertical to horizontal and if you want to destroy the swapper you can you can you can do that okay so you can uh decide to you got to destroy this software instance you can call you can use the destroy method the touch event the touch all the event is now disabled it needs if you want to initialize the swiper manually so you can you can use that and other stuff other [Music] these are all the events that survivors have so these are all the cool events like that you can use on swiper touch move on other stuff slide move you can if we use this to create custom swiper swiper js you can use it to customize your swap ids and also the navigation also these these are all the navigation store so there you come here discover autoplay is autoplay yeah if you want these side parties swiping by itself just don't send the autoplay just say the autoplay let's say you have to play [Music] [Music] is going to slide by itself as much as i can see it's not sliding by itself too much okay who does that and there's also free mode if we mode and [Music] enable mode functionality objectively [Music] and grid you want to use grid and you can check out all these stuffs uh this like for customizing for customizing this and the hd navigation is the if you wanted to uh to use the eastern navigation that uh it will all the stuff all the navigation all the navigation will be inserted into the history to it's like the data hash but this one uses the history so you can use the back button here to navigate to the previous slide and this one to navigate to the uh to the to the next slide so that's the business of the this navigation and other stuff like controller uh stuff you can do self.js okay so this is how to integrate self-address in your web application and if you like this tutorial just give me the tumblr and don't forget to subscribe to my youtube channel if you haven't subscribed it encourages me to do more okay and if you don't like this video just give it a thumb down and tell me the reason why you don't like it okay see you in the next tutorial

Channel: Build Cool Stuffs

Views: 4,303

Keywords: swiperjs, javascript, how to integrate swiperjs in your website

Id: PtGLxn7F1Ws

Length: 41min 19sec (2479 seconds)

Published: Thu Oct 14 2021