React-Slick. How to use React Slick to Create a Responsive Carousel (2023)

hi everyone this video is about reactors Loki how to use it how to make a slider and this is a very popular Library which has 11 car stores on GitHub and 69 million downloads so we will decrease an example like this okay so we can make just a single image in this place also yeah if you want to display just one image it will looks like this okay you can change it okay so we can play around it and we can do a lot of things with this so let's get started how to use it how to implement it so now let's get started first of all we will install it let's come to the docs and just come here to install it we will just write this command in web install reacts click let's come to our project this is our react project okay we have here our this is our main component and app component we have imported slider inside this and in a slider there is nothing just an empty slider okay so let's install it react slate so it will install it notifications yeah that has installed successfully okay so now let's close this and let's use it to use it first let's come here we should install the CSS Also let's copy this paste it and it will be installed the CSS select Carousel also that has installed so now let's use it okay first of all we will just let's come here to the examples and let's come here to this simple example so but we would like to create a responsive so yeah first of all we will create just a simple example so let's first we will import these let's import theme and after that let's just copy this code okay I will use images okay later I will use the images paste it here and after that let's copy the settings also yes we did it so now let's run our application so just try it npm run to so let's move to our URL we faced with error so let's check it yeah we have reported it twice let's remove it and also we have same name slider and slider let's rename our slider component I will rename it okay I have already named okay so now let's run it from scratch again FM brand new and let's move to this URL okay let's open it yeah we got this so let's import our CSS files also for the CSS let's come here import them yeah we should import these two okay select Carousel select select.css and select a result select select theme that CSS after importing them so let's check it now see it looks like this is the first one second one third one and the fourth one okay so now let's add images to this so I add images I have in the public folder in image folder these images so let's add them before adding images so let's add a card so I will just tried something like this okay to all these days okay I will add sorry not there here and also here okay let's add class name and after that card and let's remove these and straight up this let's write images and the images I mean lights images slash the first one with us is Kate one dot gpg okay and I will update all of them but before updating the images let's come here down and here I will light that card body okay it is another class inside that we will write for example H3 tag um sorry you should write like 3 10 after closing yes so now let's update our images first one is kit1 this is K2 and this one is the beauty that we have and this this one is the Beauty two and let's copy this image and paste it here and also copy this one and paste it here we have these four images and after that let's add some design a text here in H3 uh like select okay also use react click and copy this code and paste it in all of these others Ctrl D to select all and paste them here okay we did everything these are a bootstrap classes okay this okay sorry this is not this card and card body these are bootstrap Clauses you can design it using CSS or material UI okay design is so now let's add with our images okay to add weight let's come to all of these images result and click there it will select all images and add a class name [Music] equal to and add last name width under it okay so now let's stick it see it looks like this now yeah it is okay we have this card body it is a looks like card but let's display for example let's make it container okay last name container okay yeah it looks like this like but here in the right side we have in a row select customize that so to customize that let's come here to the documentation and let's come here to this custom Arrow and the custom Arrow just copy this one function okay copy this one and paste it here and the top and make it just a row foreign yeah let's come here down and just copy this code after copying let's come here to the setting but before applying this Arrow we will make it responsive okay to make it responsive just come here to the responsive example and copy all the settings that we have okay and paste it instead of this okay and let's change it for the larger devices it should display three so it goes for two or two and for this one or one two four pixel it should display two and for let's change it to 768 pixel for this it should display just one move the last one let's see kit is it responsive or not so for larger device is just three okay let's make it in pin it infinite should be true yeah it looks like this let's make it or a smaller device you see it came to uh not applied so let's stick it where is the problem yeah we should just let's make it like slideshow should be two and here I will just one okay um yes yeah let's see it now yeah not applied again so let's just change the slider scroll to one and check it now again not applied where is the error so yeah there is no problem just it needed a refresh okay in a refresh that was working okay correct okay now two smaller devices just one okay so now let's customize these arrows so to customize These reality copied this Arrow so now let's come here and come here to the responsive sorry custom arrow and just copy this next in previous row and this theme Here right instead of this we will call our Arrow if we create it okay just detail it will call this one it will pass props and we will take last name style and then click from the props and then you will assign them and just change the background color to Black okay so let's check it see the background color has changed okay so also we can assign more properties just by exploring excluding the documentation okay you can add effect saying to play and something is you can add more and more properties okay so let's just display a one for larger devices okay how it looks like yeah to display one it looks like it's okay it's like this so it was all about a react person and how to use it okay I hope this video was helpful for you if you like this video don't forget to subscribe our YouTube channel and thanks for watching

Channel: Code With Yousaf

Views: 34,468

Keywords: how to use slick slider for your website, react slick carousel, carousel react, image carousel in react js, how to use react-bootstrap carousel (2023), react carousel, how to build a slider with react, react carousel image gallery, how to use react nuka carousel, react image carousel, how to use react bootstrap carousel, how to use nuka-carousel (2023), how to use react slick slider, how to use react slick, how to use react-swipeable js (2023), how to use react-slick (2023)

Id: l3aKPVx_EK0

Length: 11min 32sec (692 seconds)

Published: Mon Apr 03 2023