How to Make Card Slider in React JS Using React Slick

hey guys my name is sahib and welcome to Kodak code Channel today in this video I'm going to show you how you can create a react uh Carousel or react slider using uh react slick so if you're ready let's get started so here I have created a simple react application and also I have installed the teling CSS for styling and if you're not aware of know how to install the telin CSS I have created a separate video and you will get the link in the description box so let's get started so in order to create U the slider we have to create uh a few slides so in the realtime project you will get this kind of data from the server API response since our application is not connected with any uh server so I have created one arage and this array contains few objects and each objects are having image and title so this images I have stored in a public folder images trajectory and few mobile images I have stored here so let's create the card first so in the app. jsx so here the app is running and let's give the height Auto and the background should be SL 600 and let's create a container and the container height should be 400 pixel and width should be uh 3x4 and in order to align It Center margin should be Auto let's add a border we check this is how it looks now give it screen means vertical height so it will take the full uh height of the screen and so margin y AIS 10 sorry should be py okay so let's create the container in order to create the container I'll be using this data let's iterate this do map item and index and it will hit or deep the key let's add one more D for the image so C should be item dot image so images are coming now let's style the image so we add some deling classes which should be 40 height also 40 and object contain let's see what looks like this and one more D I add and this div will contain the title P item dot title and class should be font semi Bolt and color should be text White and the title container will add some padding P10 and the background color let's add blue 600 let's see how it looks six in there weding should be six should be f okay so this is how it looks for now let's increase the image size a little bit with 60 60 now it looks proper okay uh so so for Sleek so this is the official site if you search with uh on Google if you search with the react Sleek so you have to click the first link and let's click the document so we need to install two packages one is this is the first one which will uh install the react leak another one is the uh the carousel this it contains the uh CSS of it so let's install first it kill the server paste it and then let's copy the second command then past so both the packages are installed now you'll find it under the package.json file and you have to copy this two Styles otherwise it will not look good let's import those two files okay so this is the basic the W slider code so first we need to import this uh slider component and this slider component you have to wrap it uh here see currently it will not work because you have okay it's so server is not up you see uh it's taking the default so you can configure it suppose you want want to display three items or four items or how many items you want to scroll while clicking this right button or left button or whether you want some dots or all so so this kind of configuration you have to do so in the settings so this dot right if you are passing True Value you'll find the dot will be coming here and uh whether you want to know slide infinite time uh so the value should be true you can control the speed of the slide uh scoll and how many uh slides you want to show or how many slides you want to scroll so all the configurations you can do and this you have to pass here settings here you have to pass it so now you see there is no change okay let's remove this uh border for now and let's remove the height so currently it looks like this so how many items for three and one should be okay something is wrong okay so you have to pass like this now you see the changes and dots are coming and uh three is three items are getting display and if you don't want the dot so simply pass false see the dots are gone let R the change and if and currently one item is getting scrolled and if you want three or two let's put three let's check three is a getting scored so one problem which I found like uh there is no Gap coming uh between this uh this cards so for that what you can do the we have a yet slideer class and that you can use it under this index. CSS file so do slick Dash slide and then under we have a deep container so here you can put a margin which is 0 then 10 pixel now you see find this Gap okay so it's not looking proper let's with the design uh can do like this and block and margin Auto images are centered and here you can change the color BG white so now you see the the slide is uh working properly so this kind of stuff you can build in your own project and you can use it in your office project so that's all for this video if you like it uh please hit the like button and if you're new to this Channel Please Subscribe this channel for more video like this in future see you next time

Channel: CodeOrCode

Views: 673

Keywords: react slick slider, react slick carousel, react slick, react slick slider example, npm react slick, react slick responsive, react slick carousel examples, react slick example, react slider carousel, react slider component, how to make slider in react js, how to make image slider in react js, tailwind slider, tailwind slider component, tailwind slider react, react tailwind slider carousel, how to use react slick, how to use slick slider in react js, what is react slick

Id: 0sVfBAO2ZJo

Length: 10min 17sec (617 seconds)

Published: Sat Jun 29 2024