Create Product slider or carousel with React.js | React.js Tutorial

if you're looking to create your own product slider or multi-carously using react this is the right video for you in this video I am going to show you how to make this amazing product slider or multi-carousel using react I'm going to show you the best the quickest and the simplest way to get this job done so without any further Ado let's Jump Right In welcome back as always mfh here and I hope all of you guys doing well okay now let's see how are we gonna build this Carousel first off if we search for multi-carousel react on Google the first result that will show up is this one react multi-carousel and if we navigate to this link we are directed to this page of npmjs.com here we can see react multi-carousel also here we can see some screen records of the final result I'm gonna make something similar to this one let's scroll down a bit here is the installation section we have to run this command to install the package first if we want to use it let's now paste it in the terminal and hit enter it was very quick it only took two seconds very very quick let's now copy and paste these two lines to import Carousel inside our component let's paste them on top of our components and now if we scroll down a little bit more we can see two setups minimum setup and common usage setup with additional features that we can add to the carousel I'm going to use the minimum setup and then gradually add some features to it if we want to I already imported these two lines so I'm gonna leave them so the code that we have to copy is all of this it's actually copied this object first the responsive object you may already guess this object is responsible for responsiveness of the carousel let me copy it and let's paste it in here now let's copy the rest of the remaining code and I'm gonna paste it inside the markup underneath the H1 element let's hit the save button and start the dev server I'll run npm run Dev to sort the dev server now the server is up and running I'm gonna navigate to this link let's see if it works I already pasted the URL so I'm just gonna hit refresh and yeah it is working fine very nice and cool let's create our product card inside the carousel instead of one of these elements I'm gonna remove the placeholder text and start creating my own element just a quick note I already created some styling to product card and to save time I'm not gonna bother you writing some CSS in this video so that's why I'm just gonna add class name to some of the elements for their styling so let me add a class name of card to this div element inside this card div element I'll add an image tag and the source of the image will be this link let's turn on word wrap because I don't want to go off the screen for alt text I'll drive products image for instance underneath image tag I'll add a H2 for products name in this case it would be sport sneakers because the image that I copied link off is a sneaker image on and splash website underneath H2 element I'm gonna add a P tag with class name of price let's add an imaginative price for example 20.99 dollars something like that let's add another P tag beneath a price element for product description for example some description about product and add another B tag inside that I'll add a button for add to cart okay let's hit the save button and see what happens it's almost working fine just the image is not looking so well let's see what's the problem okay I forgot to add the class name for my image let me add a class name of product Dash Dash image now let's hit the save button and see if it works and yes it looks much much better now let me remove all of these items and duplicate this card several time just to see if it works correctly and yeah it's working very well but this is not enough what I'm gonna do I'm gonna hit Ctrl Z to undo the card duplication okay now I want to move this product cards elements to its own file so for that I'll create a new file with the name of product jsx and let me add the boilerplate of this component and instead of this I'll add this card element so I'll cut it out from here and paste it instead of this div element and hit the save button here and insert this carousel I'll add the product component if I hit enter it will import automatically let's hit the save button and see if it works and yes it is working this duplicate it several times because I want to customize the carousel later on we'll have different products but for now we keep stick with it okay now let me explain this responsive object this responsive object as you may already guessed is responsible for making our Carousel responsive what do I mean by responsive you may already know let's hit Ctrl shift I to bring Chrome Dev tools and drag it like this you can see it's all responsive so it's responsible for this but we can customize it a little bit because I don't like to show only three products or items on a large desktop viewport like this but instead I like to show four of them or maybe five of them first off look at the breakpoints I don't want the maximum of tablet to be 1024 pixels but I want 768 pixels or I'd rather 800. and now whenever we change a viewport we have to change the relative viewport of the changed viewport to so in this case I change the maximum of the tablet mode now I have to change the minimum of the stop too in this case it would be 800. and I want the maximum of desktop to be 1024 and for super large desktop viewport I'm gonna add a thousand and 24 and the maximum is just fine for me and now I don't like to show three items on desktop version but I like to show four items at least and for tablet mode 2 is all right I think let's save it and take a look at it Let me refresh the page and yeah we have five items on a large desktop viewport like this and if I bring up Chrome Dev tools once again to see if it works well yeah it works pretty much fine great great stuff let's add even more improvements to this project okay let's remove the duplicate product components from here because I want to send different data through props to have different product items to make that happen I'm gonna make an array of objects that contains different product details I'm gonna call it product data the first property would be ID and set that to one I'll add an image URL then we copy this link and paste it here I will also add a name let me just copy the details of this product card for now let's add a price and let me copy price of this product and paste it here let's add a description and let's copy description of this product as well okay now let's have more instances of this object so I'm going to duplicate this object and just change the values of this object well to save time I already made an array let me grab it from my reference Monitor and paste it here it's a little long array with eight items in it all of them have the same properties they have ID image URL name price and description so what am I gonna do I'm gonna let me collapse this array just because I don't wanna go so much down and up and now I'm gonna map over this array so I'll say product data.map and I'll add a parameter I'll call it item and I'll use an arrow function and for the sake of simplicity I'll write it like this to omit the return keyword now inside this callback function I'll return the product component and instead of this I will call this function so to be able to do that I have to assign it to a variable in this case I'll call it product and now instead of this product component I'll add the product variable foreign let's save it and see if it works and it already started working we have eight different elements according to product data array but all of these cards are still the same however if we take a look at our array all of these objects are different from each other that's because we are not receiving any data from anywhere and everything is hard coded so we have to receive data through props so for that I'm gonna send data of their product data array through props so inside this component I'll send data so for product name I'll say name and pass item dot name this item refers to this parameter for image URL I'll say URL and pass item dot image URL for price item dot price for description uh send item dot description let's hit the save button here and inside product components I have to accept props first so instead of this long URL I have to remove it and add curly braces and insert curly braces I'll say props.url instead of product name I'll say props.name instead of price I'll say props dot price and instead of description I'll say props.description let's hit the save button and see if it works and yes we have different products in our Carousel it looks very very cool it's draggable it's swipeable on mobile phone and it is fully functional this match is all you need if we get back to our code we can make our code even more clean and organized for now it looks a very long file which doesn't look good at all so what we can do we can move this object this responsive object and this product data array into a separate file to do so I'm gonna create a new file I'll call it data.js for instance and inside this I'm gonna select the responsive object and product data array and cut them from here and then paste them here and to make these two work we have to export them and now what am I gonna do I'm gonna point my cursor to product data and press Ctrl space it will pop up the location of the array which is currently in the same directory if I hit enter it is automatically import we can do it manually just by simply typing it out but I'd rather do it automatically same here for responsive object I'll press Ctrl space and then hit enter you can see both of them are automatically imported here now let's save this file and either this file and see if it works and yes it works very very well okay now there are some more features that we can add to our cursor here we can customize the amount of items that we want to slide each time we hit left and right arrow buttons by default it is set to 1 and slides only one item at a time let's copy this and go to data.js and paste it here now it will slide three items let's hit the save button and see if it works and yeah it works fine if we give it to it will slide two items we can also add these features to our Carousel for example we can enable or disable swipeable we can enable or disable draggable or we can show the dots let's apply this feature let's copy and paste it here and it is set to True let's save it and see the result it works just fine it's fully functional here we have many other features that I'm not gonna go through each of them but you are free to play and free to experiment with them for instance you can render it on server side you can make it auto play you can change the speed of autoplay it is counted by milliseconds so 1000 milliseconds is one second 2000 would be two seconds three thousand would be three seconds and so on you can customize the transition speed and so on great great stuff here you can add custom arrows but I'm not gonna cover all these features because I wanted to make this video as short as possible but you are free to play with them and experiment all of them to obtain the desired results of your choice thank you for watching this video I hope this video was helpful and you learned something from this video I'll leave the GitHub repository link of this project in the description of this video you can find the code of this project and there consider subscribing to my channel hit the like button share this video with your friends leave your thoughts in the comment section down below and see you next time [Music] thank you

Channel: MFH Coding & Design

Views: 74,616

Keywords:

Id: sR5Z8AJ-zRU

Length: 24min 6sec (1446 seconds)

Published: Sat Oct 22 2022