SwiperJS - React JS Swiper Slider Carousel - Image Slider in React

hello everyone in this video we will use sweeper to create Carousel in react.js okay we will build something like this okay let's come here back I used flip effect for it it looks like this okay these are the dots that we have okay come back and this is the slider that we have okay and also we can remove all of them these dots the slider and also this arrows that we have and also the effect let's remove the effect first so I report the effect it looks like this now okay simply okay so we will create this Carousel in reaction now so let's get started yeah so to use this sweeper.js Library so first of all we should install that and before that let's come to the sweeper website okay this is the Swiffer website let's come here down to the react after coming to the react component and just come here to install it npmi sweeper okay it will be installed here that will be installed right now yeah the library has installed successfully so now let's see it and let's come here to the SC this paper has installed okay so after installing this now let's use it we have this app component okay in this component we don't have let's create another component by the name of slider .tsx after that let's write and here we will use our um sweeper okay so first of all just come here back and how to use first of all we should import this and let's import it after importing this let's now import the CSS yeah after importing the CSS let's just first we will just use this later we will use the images inside the token for the testing purpose once we will use it is it working or not let's run our application npm run view so it will learn our react server so let's move to this URL open the Chrome what's happening let's check it here we have just up so let's import the slider inside up let's see that that has imported so let's check it that has refreshed so we have this slide see these slides which we have okay we have four slide is see we have these four sliders so now let's add images to these sliders and also we will add other options later come here to the slider so to add the images so let's write state of this mg image and the source would be we have in our public folder in images we have these images so let's use them Images slash get one Dot gpg copy this and paste it here and instead of get one just write kit2 and also instead of this let's try it and not get one Beauty yeah Beauty one Dot gpg and inside this let's try it again Beauty copy this paste it here and it is beauty too so now let's check it how it looks like yeah it looks like this so now let's make it we will just make the M2 and also let's remove these and now let's check them yeah it looks like this okay so now let's add some changes to them we will just add some very thin hair to the images I will add I will add inline CSS okay so for that I will just write and all these elements Style width is equal to 100 percent so save it let's check it now yeah it looks like this now okay so we can just display just one of them also so the Gap is 50. this is the gay poke between the and also we would like to display just one of them so the slide preview just one okay so it will display just one to us okay so now let's add more properties of a slider so to add those properties just come here again to the website and here we will just add this website these okay let's copy this you should import it first and then put it here and also let's instead these are the CSS files but instead of all importing all these CSS files so let's import it first yeah it is okay later I will import just one file instead of all of them and after that let's use them how to use them let's model send slides preview navigation paginations code bar let's copy all of them and instead of this paste those and this should be just one then yeah everything is okay let's come here back to our phc we have this light bar and here we should display the pagination so I will just make it first just to display two to see I'll see this is the scroll bar but we cannot see this the error is in these CSS files instead of all of them so I will just come here sweeper Dot so to find that let's come here to the node modules and come here to the find sweeper yes sweeper and come here to the sweeper and just find let's check it sweeper.bundle.css but instead of that C for that bundle dot main.css we should import this okay sweeper sweeper dot bundle sweeper bundle and in that Main dot CSS people bundle that means that says okay yeah we imported that so now let's check it okay yeah it looks like this replicate see it is working okay these are working and also these dots and also this is the slider okay this is the slider so now if we make it um let's first of all remove these close it okay close it okay and just come here and just make it one okay and come here add height I will add height to all of them so I have added height all of them and write VH okay CS code let's check it now yeah it looks like this let's place this one and also we can move by these stars and also we can move over slider so let's use effect for this so to use effect for this let's come here to the original website and come to the effects section these are the effects that we can apply and that so we will use one of them okay just this fade effect copy this and paste it here and after that just come here and in the module section we should write feed effect here we should add it also after adding that let's just write it to the sweeper okay let's run it okay after adding this so now let's check that yeah I think it will work see that effect has added okay the effect it has added so let's add some another one instead of feed effect we will add another one minute let's add import for example flip one okay it will be and flip I hope it will work so let's check it now it is doesn't affect it refresh our slide I think the flip is not imported here so let's select a flip import clip if you flip okay we should write like this okay not like justific let's copy this and use it here and let's check it now yeah it is okay now but something has happened so everything is okay nothing is wrong let's see it yeah push it again and just shoot let's come here and just come here see we have that result you know the result that is okay that was the effect that we have applied and that so you can apply different effects on that let's just come here and use one which one you like okay so it was all about using um super JS and you creating a carousel in react cheese I hope this video was helpful for you if you like this video don't forget to subscribe our YouTube channel and thank

Channel: Code With Yousaf

Views: 18,987

Keywords: swiper js, swiper slider in react js, react js, react js swiper slider carousel, swiper carousel, swiper js react, swiper js carousel, swiper slider, swiper js slider, react carousel, swiper, swiper js tutorial, swiper js pagination, image slider in react js, react slider carousel, swiper js react tutorial, how to make image slider in react js, swiper js 3d, react native carousel slider, react image slider, image carousel in react js, react swiper slider

Id: vJcd7rR9_rk

Length: 11min 2sec (662 seconds)

Published: Mon Apr 03 2023