Mastering Responsive SLIDERS with REACT SLICK, REACT JS , REACT ICONS and Tailwind CSS 2024🔥🔥🔥

hello guys welcome back to the new video so in this video we're going to make this slider using the react slick so let me show the demonstration of the slider which we're going to make in this video so you can see that we have a slider here and for the arrows we we have the arrows at the top so when I click on this Arrow the slider will move from left to right and also for this one okay so I'm going to show you how you can make this slider using the reactjs react slick and the react icons so let let me copy some uh things from my previous okay so let me go to this and uh I'm going to copy this uh array from here okay these are the slider content okay so uh I'm just copying this from here so let me go to my new project and here uh let me go to SRC folder and here I'm going to add a folder components okay so and inside this I'm going to add a new file slider. GSX okay okay so let me go here and we're going to write here RFC so it will open boiler plate okay so after that let me go here and I'm going to Simply paste here the content which are required for making the slides okay and so let me copy some things from the react icons okay so for that let me go here and I'm going to copy these two uh which are the icons okay so for that let me go back to this and I'm just going to paste it here so it will show me the error because I have not installed the react icons Library so let me quickly open a new one from here and we're going to install the react icons library to npmi react icons so it will install the react icons Library so we're going to use this okay so this is installed okay so let me go here and let me save this so this is I think install Okay okay so now uh what I have to do okay so now what we have to do we have to go to the app. GSX and here we have to import uh let me import this slider there slider just write it and uh uh let's uh save this so let me get back to this so here you can see that our component is ready to render okay so let me open this uh like this so we can see uh while building what we are building here okay like that okay so now okay so let's uh uh go to the slider component and here we're going to go to the file from here go to the okay so we we going to go to the view and do the word drag okay so so let's uh uh remove this all and so I'm going to enter some classes here so which will be full and BG slate 200 height fit Flex Flex call justify Center item Center padding in the x-axis padding in the xais would be four and padding in the Y AIS would be 10 these are the tailin CSS uh utility classes so okay so we're going to use this for styling so this will be quick this and and for the large devices and let's add the gap of six to the main container okay so let me format this okay so after that you have to go to inside this div and here we're going to enter H1 so let's write our best services so let me write it here so you can see that it start rendering here so let's style this I'm going to write text 6xl text black font bold XT Center so let me Zoom this little bit so you can view it clearly okay so I think this one is enough okay so let's get back to this and we're going to write here lurm 10 okay something like that TT Excel X Center okay so we have this also so let's move to this and we're going to render our dip so right now you can see that I have the content above and uh okay so let's start and we're going to map this so let's uh add a class to this main day uh width would be full and height would be fit and padding would be eight okay so let me go here and here I'm going to render this let's write data. map open the two brackets and inside this I'm going to write index index item and index so let's open this fun here and inside this I'm going to make a new div okay like that and here we're going to write key will be index okay after that uh let's uh style this BG by PX would P would be 10 rounded Excel Flex Flex column justify item Center and uh okay and then border B 8 pixel we're going to give the custom border width here and border red 500 okay like that so you can see that it start rendering the Border here so let's go inside side this and here we have to give a ID so we can stle it after that by using the uh CSS so let's me give here uh slider boxes okay so let's go inside this and here I'm going to render the icon so open this and write here item do icon and and so if we have the item so it will render the item item do icon Auto close this bracket and here we're going to give the classes so withd would be custom 45 pixel and height would be custom 45 pixel okay so let's me save this so you can see that our icon is rendered here now we have to do one more thing we have to wrap this icon inside a div so let me WB this icon inside this div and we're going to give this uh D ID icon box but it is not required so let's add the classes BG yellow 400 padding would be six from all the direction and rounded full so it will give the Border radius to the full and make it Circle then on the hover BG yellow 500 and pointer okay so when you hover it it will show the pointer of the mouse okay so let me see okay so this is also done so let me format this once and minimize this okay so now uh we have this icon so after the icon what we have to do we have to open uh we have to open a main uh another div here so inside this div let's add classes Flex uh Flex call justify item item Center and gab would be six and margin top would be six so let me save this so inside this we're going to render H1 and it will contain item. title okay then in the H1 we're going to style it text 2 XEL text black and font would be V okay so let me format this okay then after that we're going to render p and inside this we're going to write item. par okay and we're going to give some styling to the P also the text would be 17 pixel and text would be Center so you can see that our slider is rendering properly so okay after that we're going to enter a button here and inside this I'm going to write item do label let's update so read more is come there and let's add classes here BG yellow 400 padding in the X direction would be eight and padding in the y direction would be three and rounded Excel and font would be semi B let me save and format this okay so you can see that slider is uh almost ready just we have to use the react slick library to make it slide okay so okay so for sem after that we have to give some H BG black and how uh text would be white so when you take the mouse over it it will change its color to black and white okay so let okay so uh this is ready let's format this okay so all this is ready just we have to uh install the react slick so let go to the browser and here we're going to go to react slick uh react slick slider website so let me open this quickly and from here you have to go to the examples and in the okay so first let's go to the docs and here you have to install this just copy this command and uh let me go here and uh here we have to just copy this command here in the powers shell uh write this just press enter so let's wait for it so it will install the library react slick okay so this is install and after that we have to install this like uh this one okay so copy the second command for the Slick carosel okay so copy this from here and just go to here and run this command also okay so both our commands and libraries are installed so now let's minimize this and also we're going to minimize this okay so let me open this again okay so after that what we have to do the both the library are installed uh just we have to go to this get started and from here open the examples and here open the responsive part okay so we have to just copy these two imports from here just copy this import and in the okay so let's copy this the second one only and paste this after the react okay like that and after that what we have to do we have to okay so import again go to the get started and from here you have to just copy this to CSS Imports so uh paste that after this okay so this one is done and just we have to go to this uh responsive slider and from here just copy this settings so I copy this settings till this and after return return and inside this above the return statement paste this okay and uh like that so now what we have to do you have to just wrap our uh slide wrap our main section to this I will show you okay so you can see that here our bracket is starting means a map function so just paste this here and where the map function is closed paste this here like that let's save format this once let's get back to here okay so you can see that we have uh there issue some so it's saying that I have already uh uh use the name slider so we have to just change the name of our component component so okay so what we have to do just to change the name of the component here uh so let's get back to this quickly and here I'm going to rename this component uh slider slick something like that okay so after that let's update this all over there I think it will automatically update just we have to change here also sliders look like that and in the export also we have to change this sliders link okay and in the app you have to change this slider select and let's remove this okay so you can see that our slider is loaded here so just get back to the slider slick and from here format this okay let me WRA this okay okay so now this is rendered here just we have to change some settings so here you can see that we are we are getting dots true so make it false and for the infinite make it true and for the slideshow make it fall four slide to scroll make it one okay so after that make it two and make it here one and here also make it one make it one and start okay so now what we have to do we have to go to our index. CSS file and we have to add some CSS custom CSS so file we have to add CSS like right here slider and boxes and display flex and make it important so when you do this you can see that this this one is coming like that okay then after that okay so let me do one thing uh let me open this full and let me also open this full now okay okay so let's me go here and we're going to write here slick slide D and we're going to give here margin of 10 pixel okay so let's get back here slick Arrow before color red on size would be 50 pixel okay so I think uh we are not getting here BG so let me go back to this and here right B slate 200 so let's get back okay so you can see that we are getting here okay so uh here you can see that we are having four slides and but in the previous video you uh you can see that I have only the three slides so we can what so what we can do we can go here and here in the uh slide to show we can write here three so let me save this and you can see that now the slider is looking perfectly okay like that and just we have to style our arrows to the top so let's get back to this and here let's go to the index. CSS file again and here what we have to do so you can see that I have added this so let me add slick for previous minus UH 60 pixel and after that for the left we're going to write 11 70 pixel okay then slick next write 26 pixel and for the top it is minor 60 pixel and let's also add some custom media queries for the only the for smaller scen okay so right now I'm only showing how to add media screen only for this uh mobile version okay so and so you can add media queries according to you okay so let me go here and I'm going to just copy this two so and for for this I'm going to write here 200 okay and for this let's write minus 30 so let me show you the ttop part first so you can see that in the ttop part we are getting the arrows above and and also our slider is working perfectly after changing it to uh this much slide okay so you can adjust the slides from here means how many slides you want to show if you want to show four slid so you can go here and so it will showing some uh issues here in the spacing so I'll suggest to use a three slide or whatever according to you is good okay so now let's uh add the media queries here for the next also so here I'm going to write uh - 25 pixel and uh 200 pixel okay for the next and also let's copy this here and we're going to use small size so let me write here 40 pixel okay okay so you can see that our slider is perfectly working and this is also responsive for the Mobile screen only right now but you can make it responsive for all the screen okay so you here you can see that this is also responsive for the Mobile screen okay so it is not coming in the center so just you have to add the text Center property so it will be in the center okay so in this way you can make uh any slider using the react slick Library you can go and check out here here you will find so many options here okay so you can just go and check out here and you can uh make uh any type of SL by using the react slick Library okay so I I hope you like this video more about the react GS and the elementary stuffs so subscribe to my channel and we're going to see you next time

Channel: DEBUG ENTITY

Views: 2,740

Keywords: react js tailwind css project, react js tailwind css, react js tailwind css portfolio, react js tailwind css landing page, react js tailwind css tutorial, react js tailwind css dashboard, react js tailwind css website, react js tailwind css project hindi, react js tailwind css admin panel, frontend projects, frontend projects with react, frontend projects with source code, frontend project ideas, frontend project html css js, frontend projects for resume, react js project, uiux

Id: MY0j2LRt5l0

Length: 20min 13sec (1213 seconds)

Published: Wed Feb 14 2024