ReactJS Image Slider Tutorial - (With Auto-slide effect)

hello guys and welcome to this video in today's um video we're going to learn how to create an image slider and it's exactly what you see on the screen but the interesting thing about this one is that it's going to have an auto scroll effect such that every x amount of seconds which is determined by you um it's going to scroll to the next slide so that's basically what you see uh so every five seconds it's gonna go to slide three and like that now we also have these buttons here at the edge of the you know slider such that you can actually change the slide by yourself so it's like two slide three back to slide one so there are three slides and the previous button also so you can go back like that and if you are not clicking on the button then the auto scroll effect uh takes over and you know moves the slide every five seconds in our case so it's going to be a very interesting project we're going to build it with react and i really do hope you enjoy it now however this is one of the projects i build in my react mini project course so if you can actually take a second to look in the description you're going to see a link to this very course react js mini project course and it promises to be interesting because there are a lot of mini projects we build like this that will help you become a better react js developer thank you so much for the support and let's get started all right let's get started with the project so i have my i've created my project uh template here you should do that then here i'm going to create um inside of the components folder i'm going to create a new folder let me just do like so and i'll just call that slider so slider and within the slider let's create two files the first one is going to be slider.js and the next one is going to be slider.scss okay then there is a dataslider.js file it just contains the data for which we're going to create our slider so what i'm going to do is i'll just drag that file inside here so let me just locate the file somewhere here and i'll drag it in here so i'll just put it inside the slider um folder okay so within the slider folder we have three files the slider.js slider css and sliderdata.js now this is what the sliderdata.js contains basically it's um an array of objects so you see slider data and basically it contains the image so the image you see here then a heading basically which says slide 1 slide 2 and slide 3 and then some description that's it so let me just show you and then we exported it so i think i can go ahead and close that up so we have some space so right now let's go to our slider.js and let's make it a component so i'll use the shortcut to do that and in here i'm just going to say slider like so then i would of course add my css file so let me just do that in one stroke so import my slider.scss like so great um i'll go ahead and save that and i'll go to my app.js and then i'll reference my slider component here so i'll say slider then i would auto import it so you see here it has imported it's then let's close that up if we go ahead and save and we look at this place here we should just see slider yeah so this is the this current project i'm working on this is you know it's here great so basically what we're going to do is we're going to work on slider.js and slider.s css so i can go ahead and close app.js for now and let's come to slider js so within slide.js um basically there are some things we're going to use um how am i going to describe this anyway let me just start working so i'll close this my folder structure on the end so we have some space then let me start by importing use state okay so i'll come here i'll just import use state because while i'm even creating the mac uh the jsx i would need to actually use create one state at least one state for everything to work that's why i'm creating this use state from now um then okay so let's i think we can get started yeah but for now let me just create this state so i'll come here and i'll see use state and i'll create the state and i'm going to call the name of this particular state current slide like so and of course i will capitalize this second current slide and i'll set the initial value to zero like so so that's like the only thing i want to do in this particular video sorry i mean when it comes to using react hooks okay great so now let's go to the uh return statement and within this return statement let me first of delete what we have here and i'm going to give this div a class name that sorry class name of slider so like so and there are two arrows we're going to need so let me actually look at the finished project so that we can see what we're doing so these two arrows we're going to import them from react icons i already have the names of the arrows so i'll just copy them so the first one is this particular one and i'm actually just going to go ahead and give it a class name straight up of arrow and this first one is going to be the previous arrow so i'll call it prev i'll give it a modifier class of prev and then i'll go ahead and close it then i would duplicate this downwards this one is going to be next so this is the next arrow but of course it's going to be a different um icon so i'll make this right like so now the only thing we need to do now is we need to import these icons from react icon so i'll just come here and i'll see import like so so the first one let me just finish the statement here from and then i'll just see reacts icons forward slash ai and this ai is just the first two letters here ai great then let's go ahead and import the second one so i'll just copy this guy and i'll come here and paste that in great so we have the two icons we need so this left and right sorry this previous and next are we have them inside of our project which is okay all right so now what we need to do is we need this data we need to be able to access this slide the images the text and everything and remember that we have a slider data file where all of this is located so if you permit me i'll just you know show you once again so this is a slider uh data file and you can see we have this guy here so you know what i'm going to do i'm going to import that file because i need it here so i'll come here and i will import the i would say import slider data okay from and it's inside the same directory so dot forward slash sliderdata.js so that's basically um what i did what i'm doing here then inside of the return statement here after this my right arrow i'll just come down here you know what let me just give some space so that you can see what i'm doing very clearly so i'll come down here and [Music] i would you know open my curly braces because i want to write some statements here i will now see slider data dot map so i want to map through the data and get access to what is inside of it so let's use our arrow function syntax here i'm going to represent every element inside that slider data array as a single slide so i'll say slide yeah like so but i'm also going to need the index so that's like the default numbering that comes with the map methods okay then this user arrow function here like so and then i'll open it up okay so here inside of this map method we're using here we're going to have to return something so i'll say return and i'll just open this parenthesis here and put everything i want to return in one statement so what do i want to return well i want to return a div and this div so let me just create the d first so div because it's a bit uh you need to pay close attention here so i'll open the div like so let me just scroll down okay this div is going to have a class name so let me just say class name now i'm not just going to add a regular class name there are two class names i'm going to use the first is slide and the second is current because you'll notice that there are three slides but one slide shows per time that slide is going to be referred to as the current slide okay so this is slide one slide one at this point is the current slide at this point slide two is the current slide i hope you understand so i'm going to use some logic to determine which is the current slide and that logic is going to reference the index with the current slide states we created here so let me show you what exactly i'm actually going to do so i'll come here i'll open my curly braces and i will say that if the index index referring to this index in this map method so i'll say if the index is equal to so triple equals value and type current slide which is this states we have here so i'll say current slide then so this is actually ternary operator so i'm saying that if the index is equal to the current slide then i want it to have a class name of slide and current so i'll add my else statement here else i just wanted to have slide so this should actually be in because it's a string so it should be in quotes so that's basically it then because um this is a map method here i'm actually just going to immediately give this a key so ctrl z to make undo that so i'll come here and i'll see that key is equal to index so let me open my parenthesis sorry my curly braces and i'll say index now let me quickly state at this point that if you are creating an application where you may you will need to delete an item or add an item you should not use this index as your key you should use a unique um identifier so maybe in your slider data maybe you give it some kind of id that is unique to all elements okay but because it's just a slider we're not deleting anything we're not adding anything we're just you know going through them i can afford to use my key sorry my index as the key okay i hope that's clear great so we're done with this first bits now let's come inside of this div and inside of this div i'll open another curly braces because i want to add another expression here so i'll come here and i'll open another curly braces and inside of this calibration just watch what i want to do before i actually display this slide here i will still check that the index is equal to the current slide so i'll say that if the index is equal to triple equals current slide then so i'll use my and so and then i would then display something so what that what i want to display at this point is the slide the slide component you see here so things like the image this heading the description and even this button okay so i'm saying that if index is equal to current state then display what is here so i would then come here the first thing we have is the image so i'll say img my image tag s tab that and of course the source of the image is let me delete that and i'll see here so we're represented we're representing each element inside of this slide data as slide so i'll come here and i'll now say slide dots image where am i getting the slide dot image from well let's go to our slide data so you see in our slide data we have three properties so we have the image the heading and the description so that's what i'm referencing so basically i'm seeing that slide dot image here so it will look for that image and get the image i'm just going to give the authors slide just to keep things simple then the next thing we have the next element we have is this um content we have here that's the slide one the text and blah blah blah so you know what i'm going to do i'm going to put it inside a div and like group everything so i'll call that div i'll give that dv class name of content okay now inside of this uh have i done something wrong here okay i think i did something wrong so let me do ctrl z and everything is fine at this point okay okay i know what's going on here so um the it's just um like the rule you have in reacts where every all of your um jsx has to be housed in a single element that's basically what went on here so i can actually use just a simple d for example so let me tap that or even a react fragment so let me cut that and i'll just come down here sorry about that i'll just i'll come down here like this and put that in so inside of this parenthesis we have just one div so basically i can then add other contents here so i can add another d with a class of contents and we're not going to get any error so okay so um if you like you can make this a fragment so you can just make this a fragment if you like and maybe that's what i'll just do here so for the contents basically we have the heading first this heading you see here and that's going to be h2 so i'll say h2 and basically it's just going to be slide dot heading so slide dot heading then next we have the description so that's going to be a paragraph and like it's going to be slide dot desc because i did the short form there then lastly we have the this line here so basically i just use the horizontal rule just to make things simple then we have a button so button and it's going to have a class of dash it's a it's a helper class so dash dash btn then it's going to have another one dash dash btn i think it's primary so btn hyphen primary rights i think that's about it so i'll just tap that and inside i'm going to see get started like so and then i'll go ahead and save so yeah so that's about it as fast the gsx is concerned so basically what we just need to do now is let me show you what we've done so far so so this is what we've done so far it doesn't look like anything like what we have here but don't worry we're going to add some css and then we'll then add javascript so in the next video we're going to add css to make this look a little bit you know better all right thank you and see you in the next one all right welcome back guys now let's add the css for this particular project so i think i can close my slider data and just go to my slider a css file and basically we're going to start with the slider class so that's from this point here slider so let me just grab that and let's get started so dot slider and let's open that up so first off we're going to give it a width of um 100 percent uh percent that's five then we're going to give it a height of so basically i don't want it to cover the whole screen so i'll just say 90 percent of the viewport height then i would give it a position of relative lastly i'll set the overflow to hidden like so great now we'll then target the individual slide so i'll come here i'll see dot slide like so and we're going to set the position of this slide to absolute then i'll say that from the top i want it to be 0 from the top and 0 from the left so i'm positioning it exactly where i want it to there from the top there from the left i'll give it a width of 100 percent that's the individual slider okay i think at this point oh yeah so i'm on the page i wanted i didn't know i was on the slide page so everything we're doing now you see it's reflecting here so with 100 height of 100 as well then we're going to set the opacity to zero so in other words we don't want it to be displayed we don't want it to show okay then i'll set the transform i'll say transform then i'll say translate on the x-axis to minus 50 okay then let's set the transition transition i'll say all and 0.5 seconds then i'll say ease okay great so if i go ahead and save this you i don't think use anything on the page because we've set the opacity to zero so for now um let me let me let me go to this slider.js and show you something so in this slider just remember that we set the logic for this this div with the class name we said that if the index is equal to current slide now the index of the very first element on slider data is zero and we set the current slide to have an initial state of zero so what that means is that the first slide right the index of the first slide is going to match the initial current state which is set to zero so they are about zero that's why we actually saw the first slide but now what we want is that we also want to give it another class of current okay so if you come here i'll come down here and see dot current and then i'll open that up you see this opacity that we set to zero i'll grab it so i'll say ctrl c and then i'll paste it here and set it to one okay now if i save what was going to happen you'll see that the first slide will show up great then i'm also going to get this transform so i'll copy this transform and i'll come here and i'll set it to zero save and you see that it's moved from left to right that's basically what we did here so from minus 50 to zero so somewhere let me just refresh the page so i can see it again oh so you didn't do again anyway that's fine um great so now i hope you're you're following the logic so let's continue so if you open this stuff right okay let me now get ahead of myself let me just um okay yeah i'm not getting end of myself so if you open this page up you'll notice that it's not covering the full width of this screen right so what i'm going to do is i'm going to use a media query i'll come here just below this slide i'll come down i'll see at media so media screen and i'll open this up and see mean width so mean hyphen width of 600 pixels 600 px so basically i'm saying that anything from 600 pixels an above that's what min width actually means basically what i want to target is the desktop screen large screen so i'll come here i'll see dot slide and i'll target the image inside the slide so img and then i'll open that up and i'll give it a width of 100 percent 100 now if i go ahead and save watch what happens you see that the width we expand of course i also just give it a height of one hundred percent as well so that's height and save and of course you may not sense in different but if you look at it now you see that the image is just you know here like so so let's go back here the only problem now is if you okay it's not actually a problem it's actually displaying well but just to be thorough i'll come out here like this and i'll just paste that in and i'll set only the height okay and then i'll save okay just to be thorough so by setting only the height when we are on mobile with you see that it's positioned properly okay 100 percent of the height all right so now let's actually continue our work now what we need to do is we need to style the contents um so i would come here i'll say dot content and i think i want to be faster with this stuff so for the content let's position it the way we want so i'll say position absolute and i'll say that from the top i want it to be i'll set it initially to 23 rams from the top then i will say from the left i want it to be five rims from the left so let me save that and let's see what we have so i hope you can appreciate the uh what's it called the content but the only problem is that it's not white so uh before i get ahead of myself let me make it white so that i can appreciate this styles so i'll just come down here i'll see dots content and i'll see that all the children of the content so like so i wanted to have a color of white so let's just do ffff keep things simple and i'll set some margin on the bottom and i'll just say one ram save that and watch what's gonna happen see everything is white now which is okay so let's come back to our content so that we can continue styling and at least appreciate what we are doing so for this one i'll set the opacity to zero but if i save now you'll not see anything so let me just comment it out first we'll come back there then i'll set the width to 55 percent like so um okay i think i use 50 so 50 of the width then i'll set the color oh i set color here again it's not necessary anyway padding padding of three rims so three ram then i'll set the background so background and we're going to use rgbe here so rgbe come on that's not how i want it rgbe and let's use black so zero zero zero then opacity of point three sorry point three then what else do we need to do okay great so let me save this and let me show you something so this is what we have right um [Music] to appreciate it more let me expand the screen anyway no need to expand the screen for now but let me show you what happens so if you come here you see that this guy slides up when the you know slides comes in and initially it's not displayed it waits for like maybe a second then slides upgrades so that's what we're going to implement now so how am i going to do that i'm going to give it an animation animation and i'm going to call that animation slide hyphen up so slide up i want the animation to occur over one second then that's the animation duration then i want it to be ease then i want a delay so that delay is going to be 0.5 seconds okay so that's 0.5 seconds now i want i want to set an animation field mode and this time i'm actually going to write it animation field mode house the animation film is going to be four words okay and i'm going to show you what this animation field mode means okay then lastly i will set the visibility of this content to hidden great and of course i need to actually comment this out first and save so that we can at least still see what we are doing here so now let's come and set the create the animation so i'll come down here and i'll see at keyframes so keyframes and of course we've already named the animation slide up so slide up now i will say that at zero percent i want what are the properties i want to change well first of all i need the visibility to be shown so ctrl v and i'll set it to visible so visibility set to visible then the top i also need this guy so see copy that so initially the top will still be 23 percent and 23 rams from the top then i'll now say at 100 percent it's going to go up so i'll set this to 17 so if you from the top now if it's 23 ram let's say it's here when it's 17 basically to just go up a little bit okay so that's the animation basically then let me uh let me do one more thing the way this uh content area is in the mobile section it's not doesn't look too good so what i'm going to do is i'm going to add media queries to expand the width of the content area when it's on a mobile device so i'll come here i'll see at media of course we're going to say screen and so screen and max width so max hyphen width and max which is going to be set to 600 pixels okay so basically we're just going to go to this content so this is very content here that has a width of 50 will just change the width so let me actually just grab everything from here so i'll come here where is it media query and i'll paste that in and of course let me just get rid of everything except the width like so and lastly we need to close it because ctrl z we need to close it because i did not copy the closing curly brace so that's it basically i'll now change the width here to maybe like 80 and save and of course this guy will expand more quick and it looks a lot better and of course i'm sure you saw the animation it's you know the slide up animation okay so that's great so there are a few more things we need to do and the first is the um let me see let me see let me see let me see okay so we set this where is it current so we set this current to have an opacity of one okay so just for um you know having everything arranged i'm going to just cut that and break that to the bottom here let me just put that here so now i will see dot current and then dot content okay let's open that we're going to set the opacity to one so what am i doing here remember that when is just the content class this contents class we set the opacity to zero but we commented it out so at this point i can go ahead and uncomment it out and the opacity will be set to zero actually that's for this particular content you see this slide one blah blah blah but when the slide has a class of current we want to change that property of the content and we set the opacity back to one i hope you're following great then um [Music] let's see let's see let's see i think that's about it for this uh particular one here all right so let's continue then the last thing we need to do is we need to set some styles for the arrow you know the arrow there is somewhere here but i think they are under so i'll just come down here like this and i'll see dot arrow so that should be double arrow and let's open that up so let's set the border to i'll say 2 pixels 2 pixels solid and white so fff then i'll set the uh i'll say the background color so background color is going to be set to transparent then we're going to set the color of the icon itself to white okay let's go ahead and give it a width and a height so i'll say width of two ram to ram same for the height to height um let's so with height to ram we're going to set the cursor to pointer then we're going to oh let me just set the border radius just immediately below this one so butter radius of 50 so that'll make it a circle okay then let's set the position to absolute lastly we're going to set the z index to 999. let's go ahead and save and yeah so you see both of them are here now remember that we give each of the icons different modifier classes of next and previous so it's that class of next and previous we'll now use to [Music] position them where we want so before then let me just add the hover property over sudo class so i'll say dot arrow and i'll say hover open that up so basically when you hover on it i want you to have a background and i'll set the background to white then i want it to have a color of gray so i'll just use 777 then what else do i need to do okay so next i'm previous right so let's start from next so i'll say the next i'll see from the top i want it to be 35 percent from the top so that's five percent from the top and then from the right i want it to be one 1.5 ram 1.5 ram from the right so i would actually just duplicate this guy and change the second one here to previous then i'll see from the top is still going to be 35 percent then i'll say from the left left so if you go ahead and save this you'll notice that they'll be positioned here and here but since both of them have this top uh property i think i can just grab this top ctrl c and paste it inside of this arrow so after this position absolute i'll just say top and paste that in and then i can save myself two lines of code and delete them from here and if you save them you're still gonna have the same results so the last thing we need to do is we just need to make this um horizontal line here we need to make it shorter and you know add some small style so i'll just say hr open that up and i'll just give it a height of 2 pixels 2px i'll give it a color so i'll say background of white then i will set the width to width to 50 percent like so and then i'll save great so as far as we're concerned we are done with the css the styling for this particular project and you see it looks good on both a desktop and on a mobile device so what we need to do in the next videos we're going to add the logic for the project hello guys and welcome back to the project so in this one we're going to add the logic for our slider and it's actually pretty you know straightforward now let's see how we're going to go first so the first thing i want to do is let me import a hook from react i'll call it use effect and basically we're going to do some things so first off let me create a variable here i'll call that variable um slide length so it's going to hold our slider data dot length slider data dot length great now i'll quit i'll do i'll use the use effects hook here and let's just open it up and access it with an arrow function now basically the first thing i want this use effect to do is to set our current slide to zero when our page loads so here i'll say set current slide and here i'll just say zero and then i'll come here and give it an empty array as a dependency so this is going to occur once when the page loads script now that we are on track we can then go ahead and start adding the functionality remember this slide length is holding the number of items in our array slider data array so if you come here you see here that we have three items so this is one two and three okay so if you do a console.log sorry if you do a console.log of this slide length you're going to get three so let me actually just add the comment here and i'll see slide length g sorry and i'll set that to be equal to one two three let me space them out great so that's our slide length now let's come and add the first functionality which is the next uh slide functionality so what i'm going to do is i'll create an arrow function here and i'll call that our function next next slide open that up and basically we're just going to use the set current slide okay so great so remember that um the current slide um state that we set starts from zero so i'm going to come here and add a comment here so i'll say current slide slide oh sorry smaller texture starts from so current slide so if you were going to um you know list out all the slides using the current slide state it starts from zero one sorry one and then two so this zero is similar to the fact that arrays in javascript their index indexes in javascript are zero based forgiving before mixing things up so if you come here at the bottom here you see here that we were able to get the index from this slider data where we did the map method on it we got the index and indexes in javascript are zero based and this index here is actually similar to this current slide states so both the current slide and the index they are both xero based okay great so now let's continue so in our next slide functionality forgive me let me add it to the next slide to the button uh which is the next so here i'm going to add an unclick and basically i'll just say next next slide okay great so i don't have any error so for the next slide basically if when slide let's say zero what we want is we want to say current slide plus one uh so that's plus one so current slide plus one will go to the next slide actually let me go ahead and save and let's test it out and see if it works so this is like zero because the current slide initially set to zero so if i click here what happens see it goes to slide two that's perfect that's fine if i click here what happens it goes to slide three but don't forget that slide three is the last slide we have here so if i click this current slide again there is no next slide to go to so that's a problem so what we want to happen is that when we are on this last slide right we want to be able to go back to the first okay so we want to be able to have a logic that will find a way to know that okay we're on the last slide and let's go back to the first and we're going to do that right now so let me even click on this and see what happens so you see we don't have anything on the page so i may have to actually refresh this page and when i do refresh the page this use effect will make sure that the set current slide is you know put back to zero and that's why we have this here grid so how do we solve the problem of navigating back to the first slide when we're on slide three so that's what i'm going to do now right here so i'll just give a space and i'll use ternary operator so here i'll say that if the current slide is equal to sorry that should be 3 equals is equal to so remember the current slide is 0 1 and 2. so when we're on the last slide which is like 3 the current slide state will be set to 2 at that point so i'm saying that if the current slide here is equal to slide length right remember now the slide length when the current slide is at the last one it will be at current um it will be at current slide two but the slide length will be at current slide uh sorry we'll be at point three this is for me if it sounds really confusing but i hope you're following so what we need to do at this point is we need to say that slide length minus one okay that's what we need to do at this point here so by subtracting one we're going to make sure that the current slide and this slide length will be same that's basically just what i wanted to explain so what do we want to do if this is the um case or if this is the condition in other words if we're on the last slide i would then use ternary operator so i'll add the uh question mark sign and i'll say that i want to set the current slide back to zero okay i'll give it space then else i want to do this i hope you're following so i'm saying that if we're on the last slide this is what this statement means so let me just give a space here if we're on the last slide i want to set current slide to zero so take it to the beginning else i want to say current slide plus one basically that's what we just did here if i go ahead and save this guy now and i come here and i click this guy slide two slide three what do you think is going to happen if i click here again it's going to set the slide back to zero because we're on the very last slide so let me try it and voila so we have it back to one great so i think that was you know pretty okay so now let's add the functionality for the previous so first off i'll come here inside this my icons and i'll just copy this on click and paste it in the previous icon and change this to previous slide okay great i will save that because i have not created the functionality so permit me to actually just duplicate this guy and change this to prev so this is going to be preview and i'll just get rid of everything here so now for the previous slide what do we want to achieve basically we want to see current slide -1 so i'll go ahead uh yeah i can go ahead and save okay great so it's saved now before i actually go ahead and test out this previous functionality i would like to go to slide three so we're on slide three if i go ahead and go back it takes us to two because that's exactly what he's doing so he's subtracting one from the current slide if i do that again it takes us to one now we're having the same problem here because after one there's no previous slide one is the very first slide the beginning so if i click here i'm likely to get a blank page so what do we do when we're on the very first slide basically what we want to do is we want to go to slide three right so we're going to add the logic to handle that so i'll come here let me give some space i'll say that look if current slide is equal to sorry that should be three equals equal to zero right because when we're on the first slide the current slide is set to zero index based they are zero based grid so i'll say if current slide is equal to zero then what do i want to do i want to set the current slide to slide length minus one okay that's basically it then else so else is then going to handle be this last statement here so let me just drag that back and then i'll go ahead and save now let's go ahead and test our slide so we're on slide one voila so it goes to slide three slide two back to slide one and then slide three so basically we've been able to set the uh functionality to move to the next slide and the previous slide however we've not actually set the auto scroll functionality such that after every x amount of seconds it scrolls to the next slide on its own so that's what we're going to do now now for that to happen i will need to set some uh variables create some variables so first off i'll come here and i'll say const and the first one i'll create is i'll call it auto scroll right and i'll set it initially to false okay so this is the variable that when you set to true or to scroll starts you know taking effect then i'll i'll just you know define another variable i'll call it this one slide interval interval so i'm not going to give it any value i'm not going to assign it any value just define it then i'll create the last one i'll say let's interval time interval time and i'll set it to 5000. now this 5000 is in milliseconds so it's equates to 5 seconds great now let's go ahead and create the functionality that will you know auto scroll the slides so i'm going to come down here and i'm going to create a regular function and i'll call that function auto right just a regular function by the way i'll open that up and i'll say slide interval should be equal to so this variable that i defined here i'm finally assigning it something so i'll say slide interval should be equal to now i would then use the set interval method okay like so now this setting table method um is going to take two uh parameters if you allow me to use that word so first of the setting table method what i want you to do is i want you to go to the next slide so i'll see go to the next slide sorry next slide and you know it needs a timing function so the set interval method has a timing function that it should have so i'll say go to the next slide every x amount of seconds so for example if i wanted five seconds i would see 5 000 here right but because we've already put this 5000 inside an array all i need to do is just reference this interval time so i'll come here and change this 5000 to interval time that's it okay however if we go ahead and save this is not going to do anything so how do we make this guy take effect well like i just said we're going to use use effect so allow me to just duplicate this downwards let me just get rid of this guy here great so we have this fresh use effect here now in this use effect i'll say that look if auto scroll is equal to true then do something so i'll say if autoscroll is equal to true well i want to call this function this auto function so i'll say auto and i'll call the function here that's it i'm not adding any else statements now if you go ahead and save this let's see what happens i'll save and i wait for five seconds okay so it needs a um sorry it needs uh a dependency it needs a dependency here in this dependency array so what i'm going to do is i would uh set the current slide here so i'll see current slide unlike this first one that we just left is empty so here when the current slide changes that's when this guy will you know re-fire if you allow me to use that word now last thing we need to do is this auto scroll you remember we set it to false so we need to set that to true then i'll save now we can then count so five four three two one and as you can see it moves to the next slide so basically uh um what's it called our autoscroll functionality is in place but then there's something there's one last thing we need to do if i start you know sliding it's going to mess up the functionality so if i go you see it's not waiting for five seconds it's messing up the functionality you saw what happened there great so what we need to do is inside of this use effect then i i'm sure you notice that also again so inside of this use effect we need to add what is known as a cleanup function so now let me show you how you can add a cleanup function so i'll come here and i'll come down here and i'll just say return and this is how you add a cleanup function and use effect so remember this auto scroll what is actually running is this set interval right so inside of this cleanup function which is right here i'm going to call the clay interval method so i'll say clear interval and basically what do i want to clear well i want to clear this guy but it puts inside this slide interval uh if you allow me to see variable i'll copy that and say look i want to clear the slide in tava then i'll go ahead and save now let's refresh the page i think i may need to just actually refresh the page itself okay so my page is fully refreshed and as you can see slide two so five four three two one it's like three like so now let's go ahead and change the slide and as you can see whenever we change the slide this cleanup function will run and it will start counting afresh from uh one to five before the next slide actually runs so if you try that here so do this and i'll say five four three two one next slide okay so i think that's it for this particular uh uh tutorial see you in the next one hello guys and welcome back to the project so in this one we're going to add the logic for our slider and it's actually pretty you know straightforward now let's see how we're going to go first so the first thing i want to do is let me import a hook from react i'll call it use effect and basically um we're going to do some things so first off let me create a variable here i'll call that variable slide length so it's going to hold our slider data dot length slider data dot length great now i'll create i'll do i'll use the use effects hook here and let's just open it up and access it with an arrow function now basically the first thing i want this use effect to do is to set our current slide to zero when our page loads so here i'll say set current slide and here i'll just say zero and then i'll come here and give it an empty array as a dependency so this is going to occur once when the page loads script now that we are on track we can then go ahead and start adding the functionality remember this slide length is holding the number of items in our array slider data array so if you come here you see here that we have three items so this is one two and three okay so if you do a console.log sorry if you do a console.log of this slide length you're going to get three so let me actually just add the comment here and i'll see slide length g sorry and i'll set that to be equal to one two three let me space them out great so that's our slide length now let's come and add the first functionality which is the next uh slide functionality so what i'm going to do is i'll create an arrow function here and i'll call that our function next next slide open that up and basically we're just going to use the set current slide okay so great so remember that the current slide state that we set starts from zero so i'm gonna come here and add a comment here so i'll say current slide it's like oh sorry smaller i should start from so current slide so if you are going to um you know list out all the slides using the current slide state it starts from zero one sorry one and then two so this zero is similar to the fact that arrays in javascript that index um indexes in javascript are zero based forgive me for mixing things up so if you come here at the bottom here you see here that we were able to get the index from this slider data where we did the map method on it we got the index and indexes in javascript are zero based and this index here is actually similar to this current slide states so both the current slide and the index they are both xero based okay great so now let's continue so in our next slide functionality forgive me let me add it to the next slide to the button which is the next so here i'm going to add an on click and basically i'll just say next next slide okay great so i don't have any error so for the next slide basically if we're in slide let's say zero what we want is we want to say current slide plus one uh so that's plus one so current slide plus one will go to the next slide actually let me go ahead and save and let's test it out and see if it works so this is slide zero because the current slide initially set to zero so if i click here what happens see it goes to slide two that's perfect that's fine if i click here what happens it goes to slide three but don't forget that slide three is the last slide we have here so if i click this current slide again there is no next slide to go to so that's a problem so what we want to happen is that when we are on this last slide right we want to be able to go back to the first okay so we want to be able to have a logic that will find a way to know that okay we're on the last slide and let's go back to the first and we're going to do that right now so let me even click on this and see what happens so you see we don't have anything on the page so i may have to actually refresh this page and when i do refresh the page this use effect will make sure that the set current slide is you know put back to zero and that's why we have this here grid so how do we solve the problem of navigating back to the first slide when we're on slide three so that's what i'm going to do now right here so i'll just give a space and i'll use ternary operator so here i'll say that if the current slide is equal to sorry that should be three equals is equal to so remember the current slide is zero one and two so when we on the last slide which is like three the current slide state will be set to 2 at that point so i'm saying that if the current slide here is equal to slide length right remember now the slide length when the current slide is at the last one it will be at um it will be at current slide 2 but the slide length will be at current slide sorry will be at 0.3 this is for me if it sounds really confusing but i hope you're following so what we need to do at this point is we need to say that slide length minus one okay that's what we need to do at this point here so by subtracting one we are going to make sure that the current slide and this slide length will be same that's basically just what i wanted to explain so what do we want to do if this is the um case or if this is the condition in other words if we're on the last slide i would then use ternary operator so i'll add the uh question mark sign and i'll say that i want to set the current slide back to zero okay i'll give it space then else i want to do this i hope you're following so i'm saying that if we're on the last slide this what this statement means so let me just give a space here if one the last slide i want to set current slide to zero so take it to the beginning else i want to say current slide plus one basically that's what we just did here if i go ahead and save this guy now and i come here and i click this guy slide two slide three what do you think is going to happen if i click here again it's going to set the slide back to zero because we're on the very last slide so let me try it and voila so we have it back to one great so i think that was you know pretty okay so now let's um add the functionality for the previous so first off i'll come here inside this my icons and i'll just copy this on click and paste it in the previous icon and change this to previous slide okay great i will save that because i have not created the functionality so permit me to actually just duplicate this guy and change this to priv so this is going to be priv and i'll just get rid of everything here so now for the previous slide what do we want to achieve basically we want to see current slide minus one so i'll go ahead uh yeah i can go ahead and save okay great so it's saved now before i actually go ahead and test out this previous functionality i would like to go to slide three so we're on slide three if i go ahead and go back it takes us to two because that's exactly what it's doing so it's subtracting one from the current slide if i do that again it takes us to one now we're having the same problem here because after one there's no previous slide one is the very first slide the beginning so if i click here i'm likely to get a blank page so what do we do when we're on the very first slide basically what we want to do is we want to go to slide three right so we're going to add the logic to handle that so i'll come here let me give some space i'll say that look if current slide is equal to sorry that should be three equals equal to zero right because when we're on the first slide the current slide is set to zero index based they are zero based great so i'll say if current slide is equal to zero then what do i want to do i want to set the current slide to slide length minus one okay that's basically it then else so else is then going to handle be this last statement here so let me just drag that back and then i'll go ahead and save now let's go ahead and test our slide so we're on slide one voila so it goes to slide three slide two back to slide one and then slide three so basically we've been able to set the uh functionality to move to next slide and the previous slide however we've not actually set the auto scroll functionality such that after every x amount of seconds it's close to the next slide on its own so that's what we're going to do now now for that to happen i will need to set some uh variables create some variables so first off i'll come here and i'll see const and the first one i'll create is i'll call it auto scroll right and i'll set it initially to false okay so this is the variable that when you set to true or to scroll starts you know taking effect then i'll i'll just you know define another variable i'll call it this one slide interval interval so i'm not going to give it any value i'm not going to assign it any value i'll just define it then i'll create the last one i'll say let's interval time interval time and i'll set it to 5000 now this 5000 is in milliseconds so it equates to 5 seconds great now let's go ahead and create the functionality that will you know auto scroll the slides so i'm going to come down here and i'm going to create a regular function and i'll call that function auto right just a regular function by the way i'll open that up and i'll see slide interval should be equal to so this um variable that i defined here i'm finally assigning it something so i'll say slide interval should be equal to now i would then use this set interval method okay like so now this setting table method is going to take two parameters if you allow me to use that word so first of the setting table method what i want you to do is i want you to go to the next slide so i'll say go to the next slide sorry next slide and you know it needs a timing function so the set interval method has a timing function that it should have so i'll say go to the next slide every x amount of seconds so for example if i wanted five seconds i would see 5000 here right but because we've already put this 5000 inside an array all i need to do is just reference this interval time so i'll come here and change this 5000 to interval time that's it okay however if we go ahead and save this is not going to do anything so how do we make this guy take effect well like i just said we're going to use use effect so allow me to just duplicate this downwards and let me just get rid of this guy here great so we have this fresh use effect here now in this use effect i'll say that look if or to scroll is equal to true then do something so i'll say if autoscroll is equal to true well i want to call this function this auto function so i'll say auto and i'll call the function here that's it i'm not adding any else statements now if you go ahead and save this let's see what happens i'll save and i wait for five seconds okay so it needs a um sorry it needs uh a dependency it needs a dependency here in this dependency array so what i'm going to do is i would uh set the current slide here so i'll see current slide unlike this first one that we just left it empty so here when the current slide changes that's when this guy will you know really fire if you allow me to use that word now last thing we need to do is this auto scroll you remember we set it to false so we need to set that to true then i'll save now we can then count so five four three two one and as you can see it moves to the next slide so basically our what's it called our auto scroll functionality is in place but then there's something there's one last thing we need to do if i start you know sliding it's going to mess up the functionality so if i go you see it's not waiting for five seconds it's messing up the functionality you saw what happened there great so what we need to do is inside of this use effect then i i'm sure you notice that also again so inside of this use effects we need to add what is known as a cleanup function so now let me show you how you can add a cleanup function so i'll come here and i'll come down here and i'll just say return and this is how you add a clean up function and use effect so remember this auto scroll what is actually running is this set interval right so inside of this cleanup function which is right here i'm going to call the clay interval method so i'll say clear interval and basically what do i want to play well i want to clear this guy but it puts inside this slide interval if you allow me to say variable i'll copy that and say look i want to clear the slide in tava then i'll go ahead and save now let's refresh the page i think i may need to just actually refresh the page itself okay so my page is fully refreshed and as you can see slide two so five four three two one like three like so now let's go ahead and change the slide and as you can see whenever we change the slide this cleanup function will run and it will start counting afresh from uh one to five before the next slide actually runs so if you try this here so do this and i'll say five four three two one next slide okay so i think that's it for this particular tutorial see you in the next one

Channel: ZinoTrust Academy

Views: 29,123

Keywords: reactjs image slider, reactjs project, reactjs carousel slider

Id: K9bYxUREypk

Length: 69min 53sec (4193 seconds)

Published: Thu Jan 06 2022