How to Scroll Horizontally in React JS - Styled With Tailwind CSS - Javascript

hey what's going on guys in this video i'm going to show you how to create a horizontal scrolling component in react.js styled with tailwind css now it doesn't have to be in react really and truly it's just javascript so feel free to use this in any javascript project you're working on but i'm learning react so that's what i chose to build this in so here at the top we just have an image here and all these images i'm bringing in from unsplash i actually have them stored in a json file here so i'm going to put a link to my github in the description below so feel free to just clone this or if you don't use your own images that's fine but this image here at the top it's no functionality it's just for reference kind of gives it that netflix or hulu vibe to it and then here is our our horizontal uh sliding component here so i'm on my trackpad so i'm just using my my macbook sorry so i'm using my trackbook to trackpad to just slide through all these images which is great if you're on smaller devices or smaller screens however if you're on a desktop or any larger devices you're likely going to want to have these arrows here some added functionality to scroll through our images so i'm going to show you how to configure all of this we're going to install tailwind and i'll show you how to do all of this from the beginning so if you're ready to get started then let's follow along so i'm just going to drop that down a bit here and all i've done here i've created a basic react application here and then i have my mock data file here and this has a export cons data array with all of our images in here so and i've already installed tailwind and if you don't know how to install tailwind it's really easy just go to tailwindcss.com click on get started and i'm going to click on this frameworks guide go down here to the create react app and now just go ahead and highlight that i'm actually using yarn so i just um add it said yarn add and then this part right here and then you're going to want to run this npx command this npx command is going to create this tailwind.config file this content array is going to be empty by default and the next step down here is simply just to copy this string here into your content array and then the final step here is to just copy this here and go over to your index.css and just paste it there so once you have that done your tailwind will be configured correctly it'll be ready to go if you've already started your server prior to your development server prior to installing tailwind then just restart your server otherwise the tailwind won't go into effect so what do we want to do first is let's go ahead and let's go ahead and bring in our data right from from our mark mock data site here and so if you see we can just import our data and then we can just grab the id and then also the image for our image stream so let's import their data first so import data from and this is looking for mock data there we go now i'm going to get rid of this h1 here and let's add that image at the top first so i'm going to grab this and i'm just going to paste in this string there we go and i'm going to go ahead and give this also a class name this class name i'm going to say width full which is just saying width of 100 then i'm going to give it also a height and and curly when we open up brackets we can actually give just uh hard codes and values in here so i'll just say i'll say 440 pixels there we go and i want object cover so i can maintain my aspect ratio here so now whenever we open up this it's always going to stay at 440 pixels and we don't lose any of the aspect ratio there so next let's go ahead and work on our actual slider that we're going to do right so this is going to we're going to create a div here and this div is going to be just like the outer container or our um our our slider wrapper you can say right so i'm going to give this a class name and i want to say relative we want that to be relative and then also flex and i'm going to say items item center so everything's lined up perfectly in the middle here and then what we're going to want to do next is let's go ahead and map through all of our images here so we can get something on the screen so i'm going to open up some curly brackets so i can use a javascript here and i'm just going to say data dot map okay and it's going to take an arrow function and in here i'm going to say let me get that screen out of the way map this through his item and i'm going to map through really just an image here image source and then i'm just going to give it an alt tag just so just so react won't start complaining likes to throw fits about that so in here what we're going to say is item dot image because that is the url string here so that's what we're grabbing there item.image and now you can see we have um have our images here so they're kind of they're all over the place here so we need to go ahead and fix that we're going to do that with tailwind so let's go ahead and add some class name to our image and what we want to say i'm going to have each image be about 200 pixels i'll say 220 pixels in width it's just a hard code that value there now i want these to be inline block i'm going to give it a padding of two rim cursor pointer i'm going to drop that down so we can see what we're doing here and then also i want to have a hover effect so whenever we hover over it i want to scale and we'll say scale 105 and when i say ease ease in out and then a duration duration of 300. now i'm going to go ahead and save that so i want to i want you to be able to see all this here i have it zoomed in so you can have a better look at the screen here so width of 220 pixels and this is just our images there width of 220 pixels in line block padding of two the cursor pointer we have a nice little hover effect here so as you can see we have the good hover effect um however when we scroll over that's not what we want we want our screen to end there so let's go into our our container here which is this div and um what we want to do is actually wrap this this data right here and an id a div with an id so i'll just say um id sorry slider there we go and let's just move this up into the div with the id of slider now this is very important to give this div an id because we're going to come back and grab that with our javascript but in the meantime let's add our class to it so what we want this we want to be width full which is the same as saying with 100 i'm going to say heightful which is height 100 then i'm going to say overflow x scroll and then scroll and then white space dash no wrap this is kind of a rare one that you don't see very often and then we want scroll smooth now we're going to come back and hide this this this scroll bar here but that's what we want so far right and actually that's all we need to just use our track pad on a mac to just slide through these things but let's go ahead add some react icons so we can have some extra functionality here so what i want to do next is actually install the react icons packages so i'm going to say yarn add it's just react icons now i already know what i'm going to be using so i'm just going to copy that over here and this is how we import react icons just import and then you can input your icons in here and then you just import them from react icons slash whatever the pretext here this is the pretext of the icon slash md so if you have multiple um multiple icons with different pre-text you'll have to put those on separate lines so let's go ahead and and throw these in here and where we're going to put these are actually within this div right here but outside of our our slider here so and what i want to say here is i'm just going to say md chevron left and we'll close that off now we can actually access the size property here so i'm going to say a size of 40. and we'll put the next one down here just below here and this is going to be md chevron write and we'll give this a size of 40 as well and let's go ahead and close that off so we should start seeing there that's perfect that's what we want right there now we don't have any functionality yet and that's what we're going to do that's what we're going to do right now so we're going to add in some javascript here it's just going to be right here just above our return and what i want to say here i want to say we'll add the say a slide left function and then also a slide write function so and i'm going to using arrow functions here so i'm going to say slide left and this is an arrow function so we have to grab our slider right so define it and we'll say document dot get element by id and this is why we had to give it the id of slider okay and then we'll just say slider dot scroll left equal to slider dot scroll left and we want to say by you can say whatever you like i'm gonna say 500 okay 500 pixels and then let's do the same thing for the right i'm going to say const slide right and another arrow function here so var slider equal to document dot get element by id there we go and we're just grabbing the slider once more now i'm actually going to say slider dot scroll left again even though it's just once to the right but bear with me i'll show you why i'm doing this here scroll left and this one i'm going to say plus 500. so go ahead and save that there and now we have our functions but we need to hook them up to our buttons here to our icons so this is our left icon so what i want to say is just on click and whenever we click this icon we want to run the slide left function here i'm just going to capitalize that so i just saw that and then um we'll do the same thing on this icon on the right here so on whoa on on click we want to run the slide there it goes slide right function okay so let's see how this works now let's go ahead and click this boom there we go it's looking nice let's add a few styles though to our icons here and the styles i want to add are they're real simple so i'm just going to say class name here and for our styles for the icons i want to give it an opacity of 50 and then cursor pointer and then i'll just say hover on hover i want the opacity to be um to be 100 there we go so now our there we go you can see the icon is has opacity effect and whenever we hover it lightens up a little bit so i'm just going to copy this and just paste it down on our right icon there we go now we can see that on the right and that's virtually all we need to do to have a working uh scroll bar here but notice you have this kind of ugly scroll bar and that's always um that's kind of ugly to look at it works fine but it's kind of unsightly so we can actually just remove that with css now tailwind doesn't automatically have a class name to put just type in there right off the bat so what we need to do is actually go over to tailwind and is actually going to package what we're going to look for so let's go to npmjs.com and the package is called i believe it's called um this is another thing i was looking at so just real quick here i was looking at scrolling menu packages and they're just a pain and they require like basically more code than this would be here so it doesn't even make sense to me that's why i decided to create my own scroll bar here but what we're going to look for is tailwind scroll bar hide something like that let's have a look here scroll bar hide that's the one we want right there so go ahead and click that okay now just scroll down and i'm just going to copy this right here like so there we go now one more step it wants us to do is just add this to our plugin array so just select that there and this is going to go into our tailwind config file and we're going to paste it right there now we have access to what they call a scroll bar hide so let's go back to our here we go so now we have our scroll bar and i'm just going to close this down so we can see a little better and in our slider div right here the id slider this is where i'm going to add this and what it's going to say is just scroll bar hide there we go and this was actually not this scroll bar hide was not effective this is coming from our our package that we just installed so if we didn't install this package we would not have access to that so now you can see we have a beautiful full i'm going to open this up full screen but we have a beautiful horizontal scrolling component in react.js but really it's just styled with them with tailwind css and it's just plain vanilla javascript so thanks for following along you guys i hope you like this if you add any improvements to this if you want to add like scrolling with your mouse or any other features i'd be happy to see the work you've done so feel free to clone this i'm going to put the link in my github in the description below and yeah thanks for watching you guys i'll see you on the next one

Channel: Code Commerce

Views: 49,368

Keywords:

Id: x4bom6Udk_4

Length: 13min 21sec (801 seconds)

Published: Sat Apr 30 2022