Customize swiper js slider | | Bootstrap-5, Swiper JS

hello guys today i will teach you how we can make this beautiful uh slider product slider anything you can do from this okay i'm using swiper slider for this and you can learn how we can make custom how we can customize swiper in this tutorial okay if you check in responsive it will work perfectly okay and you can make like this also i will teach you how we can make these types of thing sometimes we need you know one full product and one is cut off so people know there is another product also there if you want make full you can do this you can work according to the size of size of winters okay so here if you go more you can see here is one and a half if you go here is full we can work in a breakpoint also so for this i already have this file and here i have an image file and here i have a custom js here style and index i don't have anything here and i'm gonna make here and for image you can download from on flash.com it's free and you can get a sd image from here you can use for pre and for this background i use this one you can go in this side and you can get the same from this and if you want other color or you want put other background you can do okay i will put these all links in the description so let's go how we can make this type of thing okay first of all i will use bootstrap so it will easy to make everything responsive get footage step here i will use this template okay just copy this and i'll put here next i will put title and i will leave cdn okay you you can uh download from uh bootstrap and you can put in your file also yes not everything so today we are just focusing on a swiper slider okay so for this i need swiper slider double ipr cipher gs and i have to go in swiper.gs.com guys i need to click on get start and after that you can use npm if you want okay but today i was just using cdn we need to file javascript and css okay so now you can go in this link like this and if you open this you will see all the code here but i am just going to put cdn now here before good step i'm using this one let me adjust this and we need javascript i'll put here and we need to include our custom js and style so first i will include here if you write link and put it tab you will get this and i just need to include my style.css so we can style there and in the bottom of all script we need to put our custom script here src and custom.js now we are done and we we start to work on here let me delete this let me delete this let's try either we are linkable or not yes it's working so we just need to include these two okay whereas the link here this one style and mean js of swiper okay so now i'm going to make first slider and we'll go for second one okay for that here first i will make one container and i am going to give one custom name for my swiper swf so ustm custom here okay and we will include here swiper cs course if you go here you can get this you just copy copy this one and put here right now we don't we are not working on a scroll bar we just use previous and next in the last section i will show you how we can use swiper business okay for now i am going to delete this one and right now i'll let this one we need to put image you can design uh whatever you want you can design here this is section one but right now i have an image here so i will use image like this and here i will use another image here i'm going for another one guys i already have a quote so i for first work i i i just want to copy this from my notepad now let's check in output now you can see we have all files here image file we have one image now we have to go in custom js okay for custom js what we can do go inside projects and check this one you can click on open new windows and you can just control you okay or in mac you can use command u and we we need to copy this one okay for now i have already created all the code for jquery javascript all right i'll show you and i'll tell you everything how we can use this one okay now is the same thing that we have here right i'm using same but in advance i'm using breakpoint breakpoint is used to make the slider break in the this point like if we are in a thousand resolution slider will be four if you go in 768 it will be one and a half in this kind of you can control the all your slider from here and here i make id i will teach you later i just want to delete this one i want to use same for now we have all same just i put this one okay here you can see everything is same like this i you you can just copy this okay and paste here and for breakpoint i will provide this code in linked and you can see in documentation of swiper js also and now we have to take care of this you can put your own class name here but it should be same with here we need to put here within swiper okay for example i have my swiper here so i will copy this and i'll put here and let's refresh the website now you can see images are coming one after another and we need to write css for that for now i will copy this one and i want paste here and for background i have a gradient color i'm using from this you can copy from here and just you can put in background okay if we check again in our website refresh now you can see we have slider here okay so again let's go here in swiper custom i want i want to give margin of 5 percent to make little bit down ok it's ready so now we need to make this icon in center of this slider how we can do this for this i have to go here again that's right that's this first of all guys you have to bring this one this both button outside of swiper let's close this outside of this okay if you bring this outside you can see these are here okay so we have to make swiper customize relative let's make position relative and let's copy this class this one and let's copy this one now right now we have to make this one right calc 50 minus 40 pixel and same thing we can do this is red and this is left let's refresh now you can see we have this icon in center now we want this icon in bottom of this part okay so for that what what we can do i will copy this and i want to do for both so i copy this one and here let's put bottom for example let's let's try 80 pixel let's say to lock or not and sorry we have to make this position absolute otherwise it doesn't work cyber button press this one and we all we have some some number in top by swiper so we need to unset this one so it will come down so we we can see this is in center of our slider now i want to give background in this so i want to give white let's see yeah it's working and let's give height and weight height let's say 30 pixel with 30 pixel and we need border radius to make circle butter radius 50 percent now you can see this now we need to make this icon small okay and we want to change the color of this icon for that we can copy this one and here we use pseudo colors after if you inspect this you can find there also let's see color red let's try this one now it's working so i want to give this color sorry let's copy this and we don't need this let's change the font size for example i want to give 18 pixel okay it's perfect now it's working okay and if you want if you don't want to make circle you can just remove border radius you can see like this okay if you want this icon in left right left side or right side you can do easily you have to go inspect if you check this here okay you can see here is like this you can put next in zero it go if you go in up just remove this and you can put 10 here auto and write 30 pixel you can you can also use this one okay you you just need to copy this one in here and you just need to left auto and here if you check this one let's refresh this it's working now let's go in this button just we need to put zero for example you can put here zero okay if you refresh this it will work perfectly okay but for now i won't leave this i want to make this in center and guys one main problem we face mostly when i work in project i face this problem that's why i i love to share this idea with you when you need the same for example if you try to make another slider in the same place you know it doesn't work we need to some changes on there for example i'm just copy this and i'm paste here as a space here and if you replace if you check all both slider are moving from one okay for space just i want to keep a space here under pixel let's see now we want make both slider move individually when i click it's only should be move and when i click here it should remove for that we don't need to worry about it we just go here copy this one and paste this here you have to make swiper two you can put whatever you want you can make your own name you can give your project name here and in second one here i will put swiper 2 does it work no now i have to change id of this class so now i am using this class so i want to make this an id and i i want to change this for two you can put whatever you want and i want to use this id in second one second in second slider and this is for previous preview let's click here id and this one and same we have to do for this one okay now we have a class so we can change for this one also i wanna give just id id this is two i'm going to give one and one and let's copy this this is for pre let's give id and this is for next id next let's see now it's work perfectly guys for example if you want make this product is caught here okay in big screen you just go here let's try and first one if you if you want uh give for example 3 3.5 you can see two full product and one half it means three full product image and one is half sometimes we need this kind of thing also if you want if you want to change the gap between these images if you give here 50 you can control gap also okay you can give gap in the individual break point also right now if you want only two slider we can do this also if if you want four here but in 768 if you want 2.5 let's check okay in 768 let's go in 768 768 now you can see we have 2.5 it means if you want more you want so more or less part of the third product you can make like two you can make like this also okay this is very easy guys hope you enjoyed this video and i will try to make other video also it's my new video so maybe it's boring you know like this so hope you understand and i will bring more video about the front end development and for now i'm going and i hope you guys will be rocking your life and let's subscribe and like my channel thank you so much you

Channel: Hem Raj Bhatt

Views: 7,067

Keywords: swiperjs, how to center swiper arrow icon in swiper js, how to customize swiper js slider, how to make sliders, responsive slider html css, how to make product slider in html, javascript, frontend developer, webdesign, css, css3, bootstrap5

Id: ZQmeHTB-DQ8

Length: 23min 23sec (1403 seconds)

Published: Wed May 04 2022