Build a React Image Slider with Tailwind CSS

what's going on guys Clint here welcome back to the channel goodcommerce and in this video we're going to be creating this beautiful react Jazz slider styled completely with Tailwind CSS so as you can see we click on the right arrow we can go to the next slide if we click on this left Arrow we can go to the previous slide or we can jump down here we're actually mapping through some react react icons we can jump through to that next or that specific slide so Phoenix said I built this and react.js styled with Tailwind CSS then let's go ahead and get started so let's just shrink that down a bit right now and I'm already in my working directory here just this react slider Tailwind so what I want to do first is create our react application I'm going to type npx create Dash react Dash app then let's go ahead and just install that in the current directory with a period all right you guys Happy hacking that means we are ready to go so a few things I want to do right off the bat let's go ahead and before we get started this app.css the app.test this logo.svg report web files and setup test let's just go ahead and remove all of those just to make this a little bit cleaner and easier here to follow so and let's go ahead and install react icons I'm going to type npm I react Dash icons dash dash safe go ahead and press enter and what we also need to do is install Tailwind CSS so let's go to tailwindcss.com go ahead and click on get started and let's click on this framework guide right here so next she has laravel let's scroll all the way down and find create react app so go ahead and click on that one here the first step is to create our react application we've already done that so let's move on to this step I'm just going to copy this install Dash detail in CSS let's go ahead and paste that in there next is to paste over this Tailwind CSS in this init Dash p so let's go ahead and paste that and that's pretty important it's going to create this tailwind.config.js file for us and we need that for our next step and essentially this content array right here it just wants us to paste in this string there so let's just paste it right in there inside of our content array and then the final step in here is just to copy this over into our index.css file so let's go in here and we can actually just replace all of that and and now we're ready to go so let's go ahead and start our server with npm start we're going to shrink that back down we'll say yes and if you've already started your server then make sure you have to restart it after you install Tailwind CSS so and it's we're gonna get some errors here we have to basically remove a few things just trying to load some things that we deleted so let's remove that there we can delete that rid of that and we'll say we'll say import react from react then let's go into our index.js file we need to get rid of this here and this report web vitals so we should be good to go at this point perfect so really really cool thing about um about Tailwind for example if I give an H1 of hello instead of having some big bold text Tailwind applies these bass level Styles so as you can see very very customizable so what I want to do first here let's go ahead and what we need are some some data to work with for our slides so I'm just going to pull these over from unsplash so I'm going to create an array here I'm going to say const slides then inside this array I'm just going to paste in essentially it's just an array of objects here each one has a URL just like so and feel free to use unsplash images you can use your own images or if you're getting this from an API as well this is just gonna it's gonna basically simulate that so what we need to do we're going to be using the U State hook so make sure we import that U State at the top very nice and then what we want to do next let's come down here and add in some jsx here so let's add it in right here and like I said since we're using Tailwind I'm just going to give an H1 here flow just so we can see our text so let's go ahead and I'm going to give this a class name okay and I'm going to say a Max width of give this a container here I'm going to say 1400 pixels and we can use these brackets here to write custom values in Tailwind so this is a a Tailwind necessarily tutorial um but if you if you want to see how to build like a full website with Tailwind I do have a lot of videos and I'll put one up in the cards Above So basic basic stuff here say padding xf4 and let's display this or position this as relative perfect now in here we can go ahead and get rid of this here basically I set a Max width of 1400 pixels we have a height of 780 pixels width is full which is width of 100 this is an Intel wins plug-in you guys if you'd like to see that whenever you hover on something this plugin lets you know what the CSS is so padding on the y-axis a four Ram padding on the x-axis of of one ram then position relative so next let's go ahead and get our image here to display on the screen so we're going to create another div here and this is where our image is going to be and actually it's not it's going to be uh we're going to fill it in with CSS so let's go ahead and give it a class name so we can see it so we'll say width Dash full height Death full so what is that saying is width 100 height 100 I'm going to give this some rounded edges with rounded to XL BG Center BG cover and I'm going to give a duration of 500 so we get a nice little like transition effect now we're going to use CSS to actually load our images here we'll just use this style attribute here and what we'll say is set the background image just like so and we use these backticks we can use our URL here so I'm going to say URL and let's use a template literal just like so and what we're going to say so we're looking for this slides array right there so I'm going to say is slides and let's just for now I'm going to say 0 to get our first slide and we need the URL property so I'm just going to say dot URL and there you have it we have our slide display on the screen we can go to the next Slide by saying one then we have a two and three and we have up to five total but let's just go ahead and leave this as the first slide and we'll come back and make this dynamic as well so next what I want to have are some buttons right here so whenever I hover on the screen I can see a my icon and actually click on it so let's do that next so I'm going to add in a little space right here and let's go ahead and we're going to have a just kind of label this we'll have a left Arrow then just below that we're going to have a right arrow so the arrows that we're going to be using I'm going to go ahead and import these at the top this is just the react icons if you want to use a different icon package or you just use some text on the screen that's fine as well but for react icons I'm going to import BS Chevron compact left from we'll just say react Dash icons slash BS there and I'm going to grab the right one as well there we go so now we have access to these icons here so next on this left on this left Arrow here I'm going to create a div here and inside our div I'm going to have our BS Chevron compact left let's go ahead and close that off and then I'm going to go ahead and copy that this one is going to be the right one now I can get some sizing properties this is a react icon attribute I can just say size then 30 just like so so as you can see our icons are actually displaying on the screen which is pretty cool so let's go ahead and position these where where we want them okay so and these are actually going to be a very very similar sliding so I'm just going to basically type it in on this at the same time so let's give that parent div outside of the react icon some class names and let's just say see here what we want to say absolute I'm going to say top 50 percent translate X 0 we'll say Translate Y and I'll say negative 50 percent and left five text to XL let me say rounded full p dash 2 for some padding BG black with a 20 slash 20 for the alpha we'll say text text white and cursor pointer just like so okay there we go so as you can see they're stacked on each other right now so this one let's just change this to from left to right that should bring it all the way over here perfect that's what we want right there you guys now I actually don't want these to show unless I hover over my image so how do we do that so what we're going to say is basically we have to group this div here this HTML element here with a parent element so how do we do that with Tailwind we're going to come to the parent element that we want this to be active on so this is the outside parent element and I'm just going to give this a class of group and then what we can say here and see what we can say here I'm just going to add this at the beginning here well I'm going to do it to both of them at the same time so what I'm going to say is I actually want this to be hidden okay then we can add this group property here and then whenever this group is active I'm going to say hover just display as blocks so now as you can see whenever we hover you can now see our images how cool is that you guys smash like button if you feel like you're getting the value out of this I would appreciate it so also what we want to do is let's add in some let's add in some dots down here to kind of represent all of our you know before we do that let's go ahead and make this functional so we can actually jump to the next slide so what we're going to do let's go ahead and add in some JavaScript okay so again we're already using our u-state hook let's go ahead and make use of that right now so what we're going to say we're going to say const and let's say current index and then we'll say Set current index and by default let's just say you state we'll just equal that to zero so right now right now where we have this set to zero and what we want to change is just this we can change it to instead of zero in here we'll set that to the current index just like so so now we shouldn't see any changes however if we change our state up here we should see a change in image hi how cool is that all right so by default we're just going to start with the first object in our in our array which is this first image here so what we want to do next let's come down here and create a couple functions so we can go to the previous slide with this button here and the next slide with that icon over there so let's create a console we'll say pref slide just Arrow function here and before we do that there I'm going to copy that down there we go and we'll just change this to next slide there we go okay so for this slide here what we're going to say so we need to check to see is this the first slide so what we're going to say is const is first slide equal to current index if it is equal to zero just like so and then what we're going to say is the new index we're going to use some logic here is first slide if it's true it won't say slide stop length minus one else current index minus 1. so there we go and then what we want to do is just update our state and we'll say Set current index to the new to the new index which is this right here so let's go ahead and save that there and we need to actually add some click events here so for our let's go find our icons and what we're going to say here on this compact left which is just button on the left here let's add in our function here so we'll say on click and on click what function do we want to run we want to run this previous slide function so we'll say preview slide just like so hey there we go so now as you can see we can cycle through to the previous image uh this one doesn't work yet so let's go ahead and take care of that right now so this one on click what function do we want to run we'll say next slide but we have not added anything in there yet so we can't actually go to the next slide so let's take care of that logic right now and actually guys it also makes sense to let's see here let's add a cursor pointer okay that looks good there this one here that's why that wasn't working I misspelled it there we go so now if we hover and there's our little hand Perfect all right so let's hook this up so we can actually scroll to the next slide so here is our logic here and what we're going to say basically essentially almost the same thing so we'll find is this the last slide and the last slide is going to be current index equal to strictly equals two slides dot length minus one so the new index we'll say new index is equal to if last slide it's true it's zero then we'll say current index plus one and then we need to update our state and we'll say Set current index to the new index so let's go ahead and save that you guys hey how's that you can actually scroll to the next image now you can go to the previous image all right that's awesome you guys smash like button but hey we still have one more thing to do we can't see our dots down there and I would actually like to map through how many uh however many images we have I would like to map through that many dots so let's go ahead and do that right now so what we want to do let's just scroll down here and before we do that I'm actually going to import another icon the dots so let's import RX dot filled just like that from react Dash icons slash RX notice the little RX is the prefix there just as BS is that prefix right there okay so next let's scroll down here now right below we're gonna put this right below that div right here let's go ahead and create another div and inside here we'll say let's see here we'll say let's go and give this a class name you know this display is Flex I'm going to say top or Justify Center and padding on the y axis of two so what we're going to say let's actually map through all of our images and for every image that we have inside of our slides array so we're going to map through all of our slides and for every slide that we have we're going to render out a icon on the screen and the icon is going to be that little dot so what we're going to say here let's open up our brackets here so we can write some JavaScript and what we're going to say is slides.map and then in here we're going to look first we're going to say slide and we need to slide index and then we'll say this is going to be an arrow function instead of the curly brackets since we want to render something out on the screen we actually have to use a parentheses there okay so what we're going to say here we'll say when to render out this div on the screen and inside this div is going to be our icon let's go ahead and add our RX dot filled just like that there we go so let's go ahead and save and as you can see there are our dots rendered out on the screen so we can't we we can't click on them yet and that's okay let's go ahead and let's go ahead and make it to where we can click on those dots so on this parent div let's add a class name as well real quick we'll say text uh say text to excel see if we can yeah there we go make them a little bit bigger and we'll say cursor pointer that way whenever we hover we can actually have our little hand there perfect so how do we actually go to the next Slide by clicking clicking on a DOT so what we need to do is create a new function so let's go up here and we'll create a function by the name of go to slide we'll say const go to a slide and we'll pass in this slide index just like so and what we'll say is set the current index to slide index so let's go ahead and save that there now what we want to say here actually we might not even we probably don't even need that we could just make this we'll just throw it inside here so let's go ahead and say let's give this a key so we'll give it a key react likes to give keys otherwise it'll give you an error it'll still work but it'll still like to give a little error so we'll say slide index as the key and that's our key right there and what we can say is on click and on click we're going to pass in this function here and we'll just say go to slide slide index so go ahead and save that oh yeah we'll just leave this open up here as well there we go so we can run that and we're going to pass in the slide index so each of these each of these icons since we're mapping through them we gave it a each one a key and that's how we're going to keep track of which this is the first one this is the second slide this is the third slide so now whenever we click on one of these we should be able to go to that corresponding slide so there you have it you guys this is a react react react program right here a react image slider styled completely with Tailwind CSS smash like button you guys if you feel like you got some value out of this I hope you enjoyed it leave me a comment if you have anything to say and I'll put up some links to some other videos up in the cards above so thanks for watching you guys smash like button I'll see you on the next one

Channel: Code Commerce

Views: 35,855

Keywords:

Id: tXlZCW26bto

Length: 18min 28sec (1108 seconds)

Published: Fri Dec 16 2022