Build Advanced React Image Slider Tutorial

in one of the previous videos we implemented a custom slider inside react and this is how it looks like we can jump between slides and we can use this dots on the bottom to change the slide but a lot of people in the comments shroud that were missing two key features from the slider this is why we want to implement it in this video and these features are first of all auto scroll of our slider so if we are not doing anything our slides must be changed automatically and secondly here must be a sliding animation between slides and not simply jumping and re-rendering our slides [Music] so let's look on the project that we built in the previous video as you can see here this is the parent so this is our app.js where inside we defined our array of slides every single slide has a URL and the title and here we're specifying container Styles and this is important because our slider is completely fluid we don't have fixed height and width there and now here is our component image slider where we're just throwing the array of slides that we want to render and all other stuff is happening in this file image slider.js as you can see here on the top we have styles for our slider separate slide dots and our arrows and here is our component image slider most importantly is our state current Index this is our current index of the slide and we have several functions like go to previous go to next go to slide and we simply change here our current index also as you can see in the markup where rendering just a single current slide and then when we're jumping forward or backward we simply regend a slide with the background and here on the bottom we're rendering our dots now let's Implement our first feature and it will be out of sliding which actually means if we are not doing anything slider by itself simply jumps between the slides but at the moment when we're clicking previous or next or we're using Dots here then outer sliding feature must restart again because we don't want to see the behavior that we are clicking on the next slide and then just in the millisecond afterwards we'll jump into the next slide because of how to Sliding and actually if we are talking just about playing JavaScript without react this feature is super easy you simply Define set interval and then inside this interval every single time you are just changing the slide but it won't work like this inside react because we have react Hooks and if we are talking about set interval then we must start the ID of our interval then we must clear it at some point and this is not easy and actually here we can't really use set interval efficiently because we want to abort this interval every single time when user uses arrows this is why actually the solution here will be set timeout and just to remind you the difference between set time mode and set interval is that set timeout simply does something once after defined amount of time set interval triggers something again and again so what do we want to do first of all we must somehow the ID of our set timeout so we can clear it later and inside our react components we're using use ref hook if we need something mutable to be stored between our renders this is why here let's define our timer reference and here we can use use ref hook and by default here we can just provide a now because by default we don't have any timer after this we want to create a use effect and this is mandatory because set timeout or set interval are side effects and we can't try them just directly inside our component now we want to create a set timeout inside and store our ID for this we can write here timer reference dot current and this is how we're storing this mutable ID and here we can assign our set timeout function and inside this function we can simply call our function go to next and we already defined it in the previous video it simply jumps to the next slide and we want to call this set timeout just after two seconds but it is not all I want to write here console.l log use effect just so we see when it happens let's check and browse them as you can see we are getting here use effect then here we're getting use effect again and again and again every two seconds which actually means in our case set timeout is working like set interval why it is happening because every single time we even were causing the rear end of our component our use effect is called again and after two seconds where calling go to next and as you can see here on the top go to next function sets the state and set in the local state inside track component causes the render of this component which actually means we're rendering this component we're rendering our new slide and after this use effect is triggered again after two seconds and this is exactly what we are doing here we'll jump into the next slide after two seconds as you can see here this is exactly how it works this is how we implemented Auto sliding but this is not all at some point we want to clear this set timeout before it was done when it is when for example we're jumping with the arrows to the previous or next and actually this is just changing of our state so we don't want to write our logic inside go to slide go to next go to previous we simply know every single rear end means we changed our state and here we want to reset our set timeout which actually means here we can just write if we have timer reference dot current which means we have an ID then we want to clear it this is where here clear timeout and we're providing inside timer reference dot current let's check how it changes our Behavior if I will click now on error right as you can see our set timeout does not work at all because with every single click we're jumping again to our use effect and this set timeout is starting again but now I'm not doing anything and after two seconds we are getting this outer slide and because we don't need any memory leaks we also must clean the set timeout after we destroyed our component this is why here Insider use effect we can return a function and this function must just clear our timeout so here we can simply write clear timeout and here we have timer F dot current in this case we were totally fine because if this component will be destroyed we're destroying this set timeout also but we're still missing something if I will try here to write the array of dependencies you can see the error of react hooks that we forgot to add a mission dependency go to next and we must include it here because this function is exactly the dependency inside our use effect this is why here we are writing go to next and we're not getting an error here but now if we will scroll on the top you can see the warning and we're getting here the warning from react hooks that go to next function makes dependencies of use effect and it changes every single render and it doesn't make any sense because it will just do it in the loop this is why here we must wrap our go to next function with use callback and by writing here that we have a use callback function and here inside we simply provide our go to next function and as you can see here we still get a warning because use callback function does not do anything without the array of dependencies this is why here we must Define the dependencies of our use callback function and as you can see what we are using inside this function is property current index but also our slides and actually if you don't know what you are using you can simply see it in the warning these are our dependencies current index and slides length this is why here we can simply write current index comma slides and in this case we are totally fine and we don't have any warnings from react another feature that we want to implement is sliding between our slides inside our component and the main problem is that with simpler render our image and we don't have the animation and we can't Implement animation if we didn't render all our slides beforehand which actually means we must render all our slides here just in the row and we must have enormously big container and then we simply translate the position of of our slider and the first thing that I want to do to implement this I want to Define inside our component what is the width of the parent because actually this is something that is better to get from the parent like a props and not calculated on the fly from the Dom this is where here I want to Define for example not width but parent widths and let's define it like 500. now here inside our image slider we know that inside our component we are not getting on the slides but also parent width now as I already said we must render here not just one slide with background and this is exactly what we did we must render an array of them this is where here I will completely remove this slide Styles width background and here I want to create a new div and this will be our container and inside this container I want to render all slides this is why we're simply mapping through our slides and we're getting access to every single slide we are not interested in them and here we have our slide index and here we want to render one more div with our content of background so first of all here we're providing a key because we're inside map and here we can just write slide index and additionally we must provide style and we want to use here slide styles with background and actually here to generate our Styles we must provide a slide Index this is why here we need a function so let's name it for example get slide styles with background and here inside we're providing slide index so actually this is exactly the function like we previously had just a const but now we can change it in the function and we know that here we are getting just a single parameter this is slide index and this function must return back an object and what we're merging here is first of all slide Styles this is what we had previously here background image is totally fine but not like this we want to get here not slides current in the but slide slide index dot URL is totally fine and the last thing that we want to set here is width and in our case here we want to use a property parent width that we got from outside and we need to write here pixels which actually means this function generates styles for every single slide and we're rendering all the slides in the map on the screen but as you can see in browser we don't have any images here now why is that happening actually if we will check our Styles we can see that here we have a height from our parent now inside the first container has also height 100 and we can see it on the screen now here we have our images inside but the container of these images does not have any height and actually here we can set our height for 100 and as you can see on the screen our images are rendered yesterday they are not rendered in the row but this is totally fine what we want to do now here we want to create styles for our container of our slides as you can see here we have this slide this is just an array and here we have a div without any Styles but here we must create a function because we want to Define not only Styles but also inject width inside this is why here let's create a function get slides container styles with width and we don't need to provide anything here now here on the top let's create this function so here we will have a function without any arguments and it must return us Styles but we must first of all Define these Styles so here on the top outside of our slider I want to create slide container Styles and here first of all we must use display Flex because we want to make them in the row after this we must set height for 100 this is important and the last one here is transition this is exactly animation that we want to add so here transition for example transform is out for example 0.3 seconds now we can take these Styles and just use them inside our function so here we want to merge first of all our styles that we just created but also we want to add here width so here width will be our parent width this is exactly what we're getting from the outside but we must multiply it for the amount of our slides so here will be slides length and additionally here we must set a transform because we must move our container this is right here let's try transform and here it must be an escape stream so here we want to translate X round brackets and inside here we have our property and here we will have minus and then multiplication so we will use here our current index multiply on parent width which actually means we are moving here our container and at the end we must have here pixels let's check how it works I I will reload our page and as you can see it actually works and it is moving already what does it mean here we have our container with display Flex this is right there in the row we set here height width and you can already see here transform because exactly this transform that we're changing is based on our current index and this is what is moving our slider and the last piece of logic that we're missing here is Overflow because we should not see the slides on the left and on the right this is where here we can create new container and round our slice container and let's name it for example slides container overflow Styles and inside we can Define overflow hidden and also hide 100 percent now here I will just take these Styles and put them around our container so here we have get slides container and the round with one just a div with style that we just created so now all our code is wrapped with additional div let's check how it looks like as you can see now we just see our current slide but here on the right and on the left we have overflow this is where we don't see them but as you can see our transition between slides is not there which means we wrote something wrong and I already can see here I wrote The word transition not correctly let's check again I will reload the page and as you can see now we have a nice transition between our slides and even if we are just clicking by ourselves it is nice transitioned and actually if you are interested to know how to build a custom table with filtering and sorting inside react make sure to check this video also

Channel: Monsterlessons Academy

Views: 13,346

Keywords: monsterlessons academy, how to build a slider with react, react image carousel tutorial, react image slider, react image carousel, react image slideshow, react image slideshow tutorial, react image slider tutorial, react image slider from scratch, react carousel image gallery, image slider react, image slider react js, image carousel in react js, image carousel reactjs, coding a react slider

Id: hUTwhn4BIyM

Length: 15min 24sec (924 seconds)

Published: Thu Dec 15 2022