Build a React Image Slider Carousel from Scratch Tutorial

yo what is up everyone so today i want to show you how i created this image slider or image carousel using react so pretty much here it is we have a little image and then i'll click on the next arrow and you can see that it changes it and then if i continue i have about five images right now so if i go through it all we are currently back to the car and then if i were to go through it again you can see that just goes infinitely and then let's go back to the car here and then we can just go back in reverse so the previous images i have here and then vice versa and fairly simple fairly basic but without further ado let me hop into my code editor let me show you how i created this alright so here i am on my terminal so i'm just going to go ahead and create a react app so i'm just going to type npx and then let's do create dash react dash app and let me just call this one react not recap was it react slider and i think i put uh let me just put yt for youtube i just put version one name this whatever you want to but uh here you go ahead and press enter and once that ends uploading then i will see you once it's completed alright so now it is completed so i'm just going to go ahead and cd into the react slider and then just yt v1 press enter and then i'm going to open up my code editor so i'm using vs code so since i'm using it i can say code dots and i'll just automatically open up for me and if you have a different code editor you can just simply open up your code editor and just drag the file over and let me just go here and let me go into my terminal so i'm just going to press command j i have yarn so i'll just say yarn start you have npm you can just do npm start and i just have to do this really quick if you don't have this error then you can ignore this but for me i just do a new file and i just kind of create a emv paste this in and let's try this yarn start one more time and since already have the app it's gonna just say yes here so let me bring this tab over because it opened up on the other screen but here and pretty much once that is done it's just gonna show the react icon so once you have that up then you're ready to go so let me just switch this over and now we can go ahead and start adding our code so first thing this one's fairly basic this project so i'm just gonna do in the src just right click make a new folder we'll just create a components folder here and then let's just create a new file i'll just call this one image slider i've got the s dot js and then let me just do a new file again and let's call this one slider data.js so right now in the app js we could just erase this and just say like slider see everything is working perfect i can get rid of this import logo so i can just save it here i can delete it too and here we can actually need to pass in the data first because you can't really do anything about the data but uh again there's multiple ways to do this but the way i just did i just did export cons and i called it slider data and then i just passed my array and then inside here you just have your different images so i have little curly braces and i just have image and then you would pass in encode the url so the way i did it just for example purposes i just straight up copy the image url from the internet if you actually had specific images that you wanted like an image folder then you'd have to import them like whatever your folder location is but here i'm just going to show you what i did so here i'm on this site called unsplash what has a lot of free photos you can use and pretty much all you need to do is just click on anyone you like you can just right click it and then just say copy image address and that's exactly what you do and then you just go in here and just straight up paste this and then that's essentially the the image url and then you would do another image you just straight up copy this again and just paste it and then you just replace this url with another image so you just go anywhere here click on this image do the same thing copy image address and in case you know i'm not sure if you do it you just paste that into your actual browser it'll just straight up show you the image so that's essentially what i just did here but again if you had your own image then you'd obviously have to do like your image folder slash image one jpg whatever you call it so to save some time i'm just gonna straight up paste mine in and these are just five random images so feel free to pick you just need at least three minimum but i just have five just cuz so pretty much get uh your images urls here and then i'm just gonna go now to my image slider so let's go here and if you don't if using your own different images then just do whatever you're gonna do for that but you go to extensions and make sure you have this one just type es7 and make sure you have this uh snippet right here this one it's like what two million right now and then we can go back next week off here now just type in rafc e press tab now we got this like this and then let's just do uh image let me just type in images for now and then let's go to app.js and then just simply let's import this component so let's do erase this and i'm just going to say image slider and i'm press enter and it just auto imports it if it didn't work just do control space right here it re shows it up again and then just press enter too and if it's still not working then you're gonna have to just manually import it so i'll just save it here and then let's go back to the actual app and now you can see we have images which we wrote here on the image slider.js so everything is working fine so now we need to do is pretty much first off let me just show you like how to actually show the images first so for instance here what we can do is just straight up let's do parentheses and then let's do uh curly let's do fragments first i just want to show you this just so you can see it and then i'll do my uh curly braces here and then the data file that we called it was slider data so if i go here that's what i named it and then i just do dot map and then we'll do the arrow function and essentially here's the two values i'm going to pass in slide or you can call this like item whatever or just short for s and i just say index that i'll put for the key and then pretty much in here i just want to return so let's do return and then let's just straight up return the let's do img and the src is going to be the value we put slide and then we're going to say dots image which again we call this image if you call this uh anything img then you say slide img and then for the alt i'll just put travel image for now you can obviously add an alt value to your data file and then have it custom but this is just for uh the example purposes and then let's just upload this for now and we'll worry about the index for now let's just save this so now it's going to say we can't figure out what slider data is because we didn't import this so i'm going to go ahead and import curly data from dot slash slider data so i'll save it now and then let's see saying slider data is not defined so let's make sure it's missed then i missed my thing all right let me refresh okay yeah i wasn't sure i just had to refresh the page and it's fine so now if you did everything properly it's just gonna map through your data file and just display all of the the image so right now this is image one two three four and five so pretty much now all we need to do is just create the functions and then just display the icons and then pretty much done so let's go ahead and do that so let's first off let's get use state so it's curly brace you stay here and then what i want to do is let's say cons and if you use this date before then you know this but pretty much the first value is the current value of the state and then the function after we always say set whatever we named it so current here and then after that we'll just set that equal to use state and i'm gonna set the first initial value to zero and now here i'm just going to create you technically don't need to see this but i'm just gonna say constant length is equal to slides or my slides dot length and then underneath here is where we can actually create our uh little functions but we don't have actual icons yet so before we mess with that let's do let's install so you can just hit this plus sign here or if you just want to do like we can do ctrl c to stop it and then we can just do yarn add and then just say react icons and then if you have mp installed you just do npm install react icons but pretty much this is how we got our two little arrows so once that installs i'll restart it again and bring it back up so i'll just say yarn start again and then we should be good so once once that gets completed so let me just say yes here so you should it should refresh right there so once this done all right yeah everything's back okay so now again you can check to on the package json you got react icons here so as long as you have that we can go and just import it now so let's say import curly brace fa arrow alt circle right and i'm going to copy this and just paste it and then just change that to left just get rid of this comma and let me close out the sidebar and let's say from react dash icon f8 so this pretty much are two arrow icons from the original you can see here and pretty much now we can actually add this so first off let's just change up some of this so let's just do let's just say section here then i'm going to set the class name equal to let's call this a slider and then the closing tag will just be a closing section and then in the slider this is where i added my arrows so let's just do fa arrow alts and left class name i just set this equal to left dash arrow and then on click is going to be this function we're going to end up creating as you can call this the previous slide is the name of the function so we haven't created that yet but we will and then we can do shift all down arrow and then this will just be the let's call this the right arrow and let's call this one right and then this one's just going to be called next slide so technically i might i might leave it off first because it might i think i might run an error let's see yeah so it's going to run an arrow error so let's actually take let me get rid of this i can try to comment but it's going to come a whole thing out so let's just let's just erase the on clicks right now because i want to style it first and then one thing too is it's not knowing it doesn't know what slides is because we have it on the app.js we didn't pass it in so what i'm going to do is destructure this here so i'm going to pass in the slides value and then i'll save this here and then i got to go to my app.js and i'm going to set slides the value is going to be equal to the side or the slider data which is aka the data here so it can tell it knows what slides actually means and then here i can go back and just copy this import slider data and just paste that into the app.js so again i want app.js by the way if you can see and then let's see if we make sure did i import it from the right it should be yeah it should be dot slash components slash slider data and let's refresh and now you can see everything is working fine here so now the app.js are pretty much done you don't have to worry about that anymore slider data we're pretty much done package json are pretty much done so all we have left is the image slider and then for the uh the styling just to keep things simple i'm just going to keep everything in the app.css but right now you should have your images and then little arrows up here so let's just finish adding some of the uh content but pretty much let's go here and what i want to do is go to the app.css let's get rid of all this and let's just go ahead and just start styling this so let's just do dot slider curly brace i'm gonna set the position to relative i'll just do 100 viewport height and i want to display flex justify content we'll do center and align items to be center here and then right now it looks like this and if you see it it's currently what it looks like so let's just go and we're going to create two additional slides but let's do this let's go back to our image slider and on the image let's add the class name of image so let's save that here and that way i can just go here and do dot image and just add the values so let's do 1000 pixels and heights 600 and then just border radius to be 10 pixels so now this is what it looks like here and then pretty much for the let's do uh the right dash arrow and let's set position to be absolute you can set the top to 50 percent the right to 32 pixels font size let's do three rem and color which would be black or bad that should be zero zero zero and then pretty much going to save this here and then just change the pi paste it down and then just go to left and then here we can just pretty much change this value right to the left so it'll be left and then also forgot to add on both of them make sure we add let's do a c index just to make sure it's above let's do cursor pointer and then let's add this one property let's do user select to be none no no none and let me just copy this here and now you can just make another class just straight up call it icon so they can just you have to repeat it but i just made this very simple and now pretty much this is what it's looking like here so now we need to do is uh only display the current image as well as only display the active one too so pretty much it's showing all of them so here i want to add this little line of code first and we're going to say if there's an equal array that is array four slides which is essentially the data or the slides dot length is less than or equal to zero then i just want to return no so essentially if we have no data in our data file or it's not an array then it just won't return but we should be fine since um we have an array but in case your projects are complicated that might run you an issue so pretty much now all we need to do so let me do command b we just need to create our functions at it and then just wrap our uh our image pretty much with uh some code so here we can go under here and this one is fairly basic but i'm just going to say cons and this is where i'm creating a function so i'm just saying next slide so for the right arrow instead you go to an arrow function and pretty much we're just going to set the value so set state with current so you say set current which is what we have above for use date you can see it got highlighted and here we're just gonna check if current is equal to length minus one so if you're familiar with the rays it's pretty much it starts at zero so if there's essentially four images right then it's basically zero one two three is how many the values you look at so essentially if current is equal to the length minus one right so essentially if it's there's four total it would be three if it's that then you would reset it by sending it back to the first image so zero else i want to set it to current plus one so right now if we go here and let me see if i can do console.log let's just do current and then i want to go in the right arrow really quick and let's just do on click equal to next slide i'll just save really quick and we can do command shift c let's go to the console and when i click on this let's go back click on this this right arrow you'll see now it goes to one two three and then it resets once it gets to four it goes back to zero so pretty much i have five images so it's gonna go zero one two three four which is equal to the fifth image and then it resets as you can see oh what happened let me zoom back well pretty much you saw that when i click it now on the console it just resets it once it gets to the end of the the length it'll just reset back and then pretty much if you want to do it for the previous at least the way i did it feel free to let me know ways to change it but i just said cons prep slide so back button is equal to an arrow function and then we're going to say set current and i'm just going to say if current is equal to zero so essentially if it's back on the main the original first image then i want to set the length to be minus one else i'm going to set current to subtract one so now if i go in here and go to on click on the left arrow equals to prev slide then i save this then if i zoom out and go to the now this is the back button see how we're now going backwards now so now we're at four three two one zero four three two one zero zero base you get the point and then same concept so we're still on three so it's gonna go four zero one two three right here so that's pretty much the logic behind it feel free to refactor this and change it up and let me send me um your ways you did it but all we need to do now is just check for this and then it'll just change the image so for here inside of this curly brace right here above or below the side map and then we have the return so actually let me backspace and let's go inside the return i'm gonna do parentheses and then let's do let's create a div and just press tab and then i want to press enter and then i want to put this image tag inside this div let's put that in here and then for this div i'm just going to set the class name equal to curly brace and we're going to check if index is equal to the current then i want to return the class slide and then active and then else i want to just return the class slide and then we'll just set a key i just put equals to curly brace index and then for the image so now we press enter so we should have it like this and then here for the image what i want to do is going to wrap this with another check so we're going to see curly braces here i'm just going to say if index is equal to current if that's true then we're just going to return the image or parentheses and then we just try to paste this here inside the parentheses and then let's just comment let's do this save and now pretty much is what it looks like here and then if we go we can click it it basically changes it but you notice there's no little animation so last thing we need to do is go to app.cs s and then we can just straight up add a little slide so if i go here i can just do dot slide and i'll just set the uh opacity to zero with a transition oh my bad transition right now what is it duration and it's going to be one second to do ease and then we can just do dot slide dot active and this can just be opacity of one transition duration of one s and then i just set a little transform let's do scale of 1.08 so save it here and it's not remote responsive but the majority of the logics there you can definitely refactor this but here we can see this is essentially our first image so we'll go one two three four and then back to original and then it continues infinitely and then if we go backwards we can check one two three four car one two three four card so that is how i created this super simple and basic so if you enjoyed this video give it a thumbs up share this with somebody that you think might find this helpful and then also let me know ways to make the code better refactor it and definitely send me that through github i'll definitely check it out and aside from that if you're new to the channel hit that subscribe button and i'll see you in the next video peace

Channel: Brian Design

Views: 204,699

Keywords: react image slider, react image carousel, react image slideshow, react image slideshow tutorial, react image slider tutorial, react image slider from scratch, react image carousel tutorial, react carousel image gallery, image slider react, image slider react js, react js, react js project, beginner react project, react tutorial, image carousel in react js, image carousel in react native, image carousel reactjs, react projects for portfolio, react project tutorial

Id: l1MYfu5YWHc

Length: 22min 41sec (1361 seconds)

Published: Tue Dec 01 2020