RESPONSIVE REACT CAROUSEL USING REACT SLICK

foreign if I change this if I reduce the screen sizes okay see it's responsive it's responsive okay so let's get started okay guys I already created a bit app so if you can't do that just say npn create then you choose react then just follow the steps okay so let's get started all right so I'll remove everything inside here okay remove these you do need all these okay so let's create a difficult then is two let's just see carousel tutorial right I'm using image for my shortcuts what I mean is if I if I say dots currency right you see image abbreviation then if I click enter create ID automatically so you can put your extension tab this please search for image okay you can install it you need to use the shortcuts all right so let's continue so I'll create another div box okay then inside the the H3 let's see one and there's copy and paste it perform more times okay one you see two three four five okay all right so let's style this I'll remove everything in here you donate them okay so let's remove the existing paddings and margin and border thank you both sizing I mean without ropes okay so let's style you guys every party five frame background color let's see black and let's just see color of white okay let's give it an eyes the height of 100 V8 let's start the Box Thief box okay let's say background color they just light green then height let's see 300 pixels okay so let's tie the H3 Inside the Box all right as you see text a line Center all right so let's see what we have let's check the browser and see where we are okay okay this is not looking good we're going to fix that okay so let's see wheat Android View oh wait okay so let's just let's add the colors okay so what I want us to do is let's go let's go through this step by step then go to the browser search for react all right we are slick because okay then click on this particular one react click documentation these websites all right so you can ignore this just go to talks then let's the first thing we need to do is to install real stick okay you can either use API install or you can add all right so let me use your ad so copy that and come to terminal this is uninstall all right this way if we installed in some minutes I'll be back okay guys so it has been installed if you use yeah an ad and it's wrote an error just uses npn uses npm periodically yes League to reinstall all right so the next thing we need to do is include the CSS copy this then do the same thing paste it and let's install okay guys to confirm if you installed successfully check your package.json all right if you have click slick trouser and real stick that means start being installed so let's continue all right so next thing is come to examples all right click on responsive so we'll be doing responsive so what you need to do is copy this in this particular settings object okay so copy it then come here come to your app.js PCT okay so one one thing we need to do is to import the CSS before any snail so let's come back here okay so you don't need to crab anything everything is in talk so copy this all right then come here paste is it okay but we need to remove this we need to remove this so it will work okay so the best thing I'm going to do is import slider all right import slider from real slick all right so I'm going to wrap the old box also we want to grab the boxes this slider component okay so let's see like that then add inclusion tag Billy slider okay so well if you check let me come back here we check you check documentation you're going to see the structure the settings yeah all right so we're going to do the same thing foreign settings that is this settings so let's check what we are okay so basically the car 0 is showing but we need to do some styling okay it's not looking very good right now this is on styling I come to your app.css let's see sleek slide leave let's imagine zero powering but I said I know you'll be wondering how I I call I came across this next slide div okay so I'm going to show you that right now when you can see the Imagine applied to the style the Imagine applied to the boxes Okay so if you if you need to style anything inside your car as well okay you will go to inspect so for example let's say I want to style this box okay or click on so you can see some classes added to the divs by these stickers we didn't add all these div and classes okay so that's how we're going to style them so let me click on this box okay this is the Box all right so this the we just give margin sticks like this right Okay so this particular div appear is the Sleek slide so according to CSS rule sticks slide then the div inside the sticks line as I go this next like this okay so let me show you another example for example you want to style this button okay you can say color oh sorry that's my butt and my butt Let me refresh okay let's call me let's see you can see there is a class applied to this button click dot next right so if you need to change the style you can copy this class okay sleep dot next you can see let's see right minus 40 pixels okay I'm gonna refresh all right so because we need to okay you can see the the initial Style overwrite our 40 pixels so one thing we need to do is add important okay so it's going to work right now you can see it's working so if you are if you start editing and it does not and it does not change the style just add important to it okay okay so the next thing I'm going to do is to style the dots right we can go ahead and click on expect Okay click on all right so this is the dot this is UL tag all right that's the class of stick dots okay an active plus so this is what we're going to start this before class okay the way you copy it just for me paste it all right okay so I'll see follow light green okay let's hope it works okay it will write it so let's just do an important style there okay to work okay you can see it work it's working so we anytime any active dots I'm going to change the light green okay so now let's Style the ones that are not active okay so is it let's copy it all right I just see color White font size 4 Ram so you can increase the button and this is top two red okay sometimes it works sometimes the it overrides so let's just put importance and everything so do sometimes you don't need this importance or anytime does not work just make sure you add the importance okay so Let me refresh all right so it looks good now but we can take this foda okay okay so you can see it is also responsive let me check is responsive but we can't control this responsive Behavior also so what we need to do is to come here okay so let me explain this properties dots as if you want it just to show you put the force the dots won't be there this infinite but is the true okay so you will see the difference now and you come here let me expand this you can see it is infinite it does not stop at the particular Point okay so let's see this speed is the speed you want it to slide okay then slide to show so if I change this to three screws three slides see they slide to screw if I change the one let me change this one back to four I'll change this to one to scroll one slide right so this looks screw to five scroll back to one through that two so we right so it is responsive you break points you can say the break points then yeah let's see 800 brick points and get it on red it should be this shows slide to show should be two okay slide to screw should be one right then let's see when you get to 550 so we can play with these numbers and just say it's like to show one slide to scroll one okay so let's check it okay three and get 800 2. and slide to screw is one right [Music] so let me get to 550 what was it 550 yeah it was 550. sorry I need to refresh okay and get to 550 changes to one okay so that's basically everything about react sleep carousel you can read more on documentation and if you have any question you can put it in the comment section I will make sure I answer your questions so this is a very fast way to create a reactor sale use a reactly okay and please if you like the video like the video

Channel: Olumide Dev

Views: 16,912

Keywords:

Id: Xbx8N3NGLeM

Length: 19min 7sec (1147 seconds)

Published: Sat Dec 10 2022