How to make Card Slider in React JS | React Slick

hey guys this is hitisha and in this video we are going to build this Carousel or this slider so carousels are an effective way to show content and it can make your website look really clean so today we'll be building this review Carousel that you can use on your website to show any type of reviews in a similar manner you can create other courses as well so without any further delay let's dive in so I've already set up this react project name reviews Carousel and I've also installed Tailwind CSS in it if you're not aware of the Tailwind CSS installation process in a react project I have made a separate video on that the link of it is given in the description box and also at the top now let's start creating some demo reviews but before that if we have a look in here there is a background color that we have given to the whole body so that these cards look clear so what I'm going to do I'm going to go in my index.css file which was created during the Tillman CSS installation process and to my base there within the body I am going to give it a background color and sales let's see if it is getting deflected yeah a background color is added now it's time to create these cards so for creating these review cards we are first going to create an array of objects wherein each object is going to have three major things the image the name and a review and then we are going to iterate through that array using a map so I'm going to go within my app.js file and create an array of objects I'm going to call it data here you can see we have the name the image which is basically saved in the students folder within the public folder and also a review now to this outer div I'm going to give it a property of width of 3x4 and a margin of Auto so that it comes in the center and also a specific width of 75 percent is given to or the cards that we are going to create and save also within it I am going to create another div so if you see here there is a margin top that is given so I am going to give it a class name give it a margin top of 20. now I'm going to go inside this and going to iterate through this using a map and now the first thing that we are going to create is the card item so I will create a div for that within this div we are going to have two more divs one Dev will take care of the image that we have and then there is going to be an another day which will take care of the name the review and the button that we are going to create so to this first div I'm going to create an image tag give it a source of d dot image give the alt as empty for now and then in this another one I'm going to create a P tag which will take care of the individual's name and then another P tag which will take care of the review and then we are going to create a button which will say read more and save let's see so yeah we can see that images are displaying and also the rest of the information that we have added for each of the person is also getting displayed now we just need to style it so to this after div I am going to give it a background so all the cards should have a background of white and also I want to give them a specific height so that they look similar so I'll give it a height of 450 pixels and within it I'm going to write the text in black color and also I want to give it a border radius of excel since there is an image in it I need to give this rounded Excel property individually to this image as well so instead I will give it rounded top of excel and this image that we have I want it to be in the center so if we have a look in here so there is a background color that is given and then the image is kept in a circular boundary so first I will give it a specific width and a height so I'll give it a height of 44 with the 44 and give it a rounded full property but I want it in the center and with a background so let me give it a background Indigo of 500 and also I'm going to use the flex property so that this comes in the middle so I'll give it a justify Center items Center property okay and so yeah we can see that these cards are created and we have the images as well but we also should give a specific height to this component so here I'm going to give us height of say 56 okay now it's looking better now the last thing that is left is to style these texts that we have so to this div that we have created I'm going to use a flex column property so that I'm able to line up these things one below the other I'm going to give it a justify Center property item Center and also I'll give a gap and a padding and Save okay now we can see that they have come in the middle we just need to style uh the name I'll make it a bit bold and also the button so to this P tag that I've created I'll give give a text of excel font as semi bold and to this button uh let me style this I'll give it a background of indigo or 500 just like how I've given to the image background and also I'll keep the text as white let me increase the font size so I'll give the text as LG also I want some padding around within the button so I'll give it a px of 6 py of 1 and a rounded off XL okay now we can see that all of these cards are styled up properly now it's time to create a carousel of all of these cards that we have created so for creating the slider we are going to use react slick which is a carousel component built with react so for using it we need to do two installation first is react slick and other is a slick arousal which includes the CSS related to it so let's first copy this from here open the terminal in our project and paste what we have just copied so this is installed now let's install this one as well and after installation we are going to import both of them in our project so let me minimize this a bit now for importing this we first need to write this line so we need to import slider from react slider and then we also include these CSS files in here so let me copy these and paste it okay once this is installed we just need to use our slider component so if we go to the examples and go within multiple items since we have multiple items that we want to show on the screen so we can just write this slider component and specify some settings so let's first have this and then we will specify the settings so we want it in here and we also need to close this one so also we need to specify these settings let me tell you what these settings mean so the first setting is about dots so if you want the dots to be there below the carousel that you are creating you can specify it to be true or false if you want to move your Carousel in finitely you can specify this as true or false then you can specify the speed how many slides you want to show initially if you want to specify less number of slides you can write it one two or even more and then on scrolling when the person click on the Arrow buttons that are there how many slides should it scroll so we want it to just scroll one slide and Save okay let's go back yeah now we can see that our uh slider is getting generated we have these arrows so let's click on these and see yeah they are moving perfectly fine and if we go back and they are moving in finite so there is just one thing that is bothering me and that is there is no gapping in between these uh cards that we have created since we are using the CSS that is provided by reacts click there is a diff which is uh inside this slick slide uh so we just need to specify some margin and then it should be done so yeah we have these spaces as well so congratulations we have successfully built our reviews arousal and in a similar manner you can create other type of carousels as well and that's all for this video now you can see how easy it was with react slick to create these arousal images and if you like this video don't forget to hit the like button and subscribe to this channel for more such videos in future see in the next one [Music] thank you [Music]

Channel: Etisha Garg

Views: 110,795

Keywords: carousel, react-slick, card slider, react slick, how to make a card slider, card slider in html css, easy image card slider, how to use react slick, react slick carousel, react slick slider tutorial, carousel react, carousel css, image slider, easy card slider tutorial, owl carousel, swiperjs, web development, card slider html css js, html image slider, how to make card with sliding feature, responsive card slider html css, image slider in html, responsive product slider

Id: 6YnryDjEGr8

Length: 9min 2sec (542 seconds)

Published: Thu Oct 05 2023