Build React Image Slider From Scratch Tutorial

in this video we will implement an image slider as a react component and you might say it doesn't make any sense to implement such slider on your own there are hundreds of different sliders on the internet and you're totally right but this is exactly the problem this slider you can write in 10 minutes it doesn't make any sense to use a library for this because it will be more difficult to support and library might not suit your needs this is why let's implement it on our own also if we implement it ourselves we implement only features that we really need we don't need other 100 features that you will get from every library so let's do this now so here i have an empty generated create react app and nothing inside as you can see index.js is completely empty and inside app.js i just have h1 tag so the first question is what is functionality of our slider and how we will implement it and actually i think that this is a single component where inside we can pack a list of slides that we want to show and this is why i already prepared a bunch of images inside public folder image one two three four five and if you want to get them you can just get a source code with this image from the description box below and this is how we can use our image slider from my understanding i would write here something like image slider and i will provide inside a list of slides which actually means we have a prop slides and here we must provide an array of slides this is it we don't need to provide anything else now here on the top we must create this array of slides so let's do this actually here you might say okay this is just an array of strings because we have just urls of our images and you might be right but typically you have some additional information at least the title of each image or some additional meta information this is why it makes a lot of sense to create here array of objects with property url and here i will paste localhost 3000 image1 jpeg comma and here for example title beach now i must copy paste this object five times because we have five images so here we have image two image three image four and image five but the main idea is we can provide inside slider as many images as we want and here let's change the title so here we have beach then we have board after this we have forest city and italy now on the top we must import our component that we will create in a second so here we can write import image slider from and let's just create it right here and let's call it image slider so this is how we will use it we must provide inside a list of slides and this is an array of objects and most importantly is obviously url and we are providing it as a prop slide inside our image slider now let's jump in creating our image slider so here first of all i need a file image slider dot js and inside let's create our component so here we have a component image slider and we know that as a parameter here inside props we're getting our array of slides now let's return something here at least return and inside we can write a div with a text to test so image slider now we also should not forget to export here as a default our image slider that we just created as you can see i don't have any errors so let's jump to the browser and here our image slider is successfully rendered the next question is how we will work with our slides and actually we have buttons previous next or we can jump to specific slide but this is just changing an index of our active slide this is where here i want to use use state hook and create our local state where inside we will store current index of an active slide so here we can write that we have current index and this is the index of our slide and set current index and here we're using use state hook and inside we're providing zero and now here on the top i must import your state from react now let's try to render our first slide inside div so here first of all we must write round brackets because it should be a multi-line return here we have our div and inside i want to create one more div and inside this div we will render our image but here we want to set a background image just because our image can be of different size and we want to use css property contains of background image this is why here what we can do we can write div style and here inside we're providing an object with field background image and here i will write a string with url and in round brackets here we can write our image url so what we want to pass here is slides now here we can use our current index it will be 0 dot url so this line must set as a background image our first slide let's check this out i'm reloading here the page and as you can see this is our div here is background image url the url is completely correct here is our image but we don't see it because actually we don't have widths and height and actually it is an important point we don't want to specify fixed width and height inside our slider because actually people who use our slider might want to provide different widths and height this is why on the outside container of the parent we must provide this information for our slider for this let's jump inside our app where we are using our image slider and let's wrap it with additional div so i will put image slider inside this div and now i want to write some styles for this div and i will write them directly here inside style attribute so here we can create our container styles and let's create this container styles here on the top so here we have just cons container and this is an object and what we want to provide inside is first of all width secondly height and position on the center this is why here width for example 500 pixels then we provide here height let's say 280 pixels and the last one is position center this is why margin zero outer and this is super important to remember you never want to put fixed dimensions inside your library you really want to make it fluid as you can see now here in browser we have a parent element where we set it width highs and margin 0 and actually now we can see this container directly in the center but it is not enough we also must write styles for our slide this is why i want to jump back inside our image slider and here is our styles so let's create here on the top our styles for the slide so let's name it slide styles and this is just an object first of all we want to move this background image inside because it doesn't make any sense to write it in line after this we first of all want to set our width to 100 and this is a string obviously then height also 100 percent after this we want border radius let's say 10 pixels and we want to position our image center this is why background position here will be center and we also want to use background color in this case our image will be visible correctly so let's write here background size cover now we must just use this slide styles here inside our div so i'm providing inside slide styles and this is just an object let's check this out i'm reloading the page and it is still not working but as you can see here we have a div with all our styles which actually means it is correct but as you can see here i have a problem that my height is zero and the problem is here that we have a parent where we didn't set a height and we really need to do this and this is this div where inside we can write style and let's say that this is slider styles and this is our main div for the slider so here before we can write styles for our slider and the most important here is to write our height 100 percent but i also want to write here position relative just because later we will have elements that we want to position inside with absolute for example our arrow buttons let's check if it's working i'm reloading the page and as you can see inside browser we see our image and most importantly we didn't use here an image tag we used here a background on the div which will cover the case of different size of the image now in order to change the slides we must build arrows this is why let's jump back inside our markup and here for example before our slide but inside slider we want to create two arrows so first of all here will be div and i will just paste this utf-8 symbol inside as a left arrow and here we also want to apply some styles so here let's name it left arrow styles and let's try styles for it on the top and also i will copy paste it and name it right arrow styles and here i will paste another arrow now let's create these styles here on the top so first of all left arrow styles and here we must position it with absolute then here we will have top 50 and we also want to move it on the half of the size of our element this is why here we will write transform translate 0 minus 50 also it should be on the left side this is by here left 32 pixels now we want to use here bigger font size so let's say here font size 55 pixels we also want to provide here white color so we can see it on our images this is why here will be fff and the last one is that index because actually we want to put it on the top of our images so that index here will be 1 and also cursor pointer now i want to write exactly the same code for right arrow styles and here i will copy paste it and name it right error style we have here also position absolute top 50 correct translate but here not left but right 32 pixels font size 45 color that index and cursor pointer and actually here if you think that it is too verbose to copy paste the whole styles for left arrow and right arrow you can create something like basic arrow where you will put all basic styles and then just provide left and right position accordingly let's check if it's working as you can see in browser we have this nice white errors but obviously they don't do anything so here we must now create click event for our divs first of all here let's create on click event and let's name it go to previous and now on the right arrow let's create on click event go to next now let's create these functions first of all we have go to previous and we don't need to provide anything inside what we essentially want to do we simply change the index which is our current index this is by here we can write set current index new index and actually here i am getting an error set current index is not defined and here on the top i see that i named it set current user and not set current index obviously it should be set current index now here we must calculate what is new index if we simply click on the left then we must jump to the last slide because we are on position 0. if we are not on position 0 we simply make -1 this is exactly what i want to write here so first of all let's check if it is the first slide so is first slide means that our current index equals zero and after this we can create our new index so we're checking here how we on the first slide if yes then we want to write slice length minus one in this case it will be our last slide in other case we want to simply make current index minus one now let's do exactly the same for our go to next so here is our function go to next we don't have any arguments and here we want to just call set current index with new index first of all i want to know if we are on the last slide so here is last slide we can check that it is current index equals slides length minus one and after this we can create our new index so first of all we are checking is it last slide if yes then we simply return zero in other case it will be current index plus one which actually means from the last slide we jump into our first slide in other case we simply jump to the next slide let's check if it's working so here i'm reloading the page i'm hitting previous and we see the last image now i'm hitting previous again and we see the third image now if i'm hitting next we see the last image i'm hitting again we see our first image which actually means our logic is implemented correctly and the last feature that we want to implement inside is stored underneath our image which actually means here we have dots and these dots represent all our images we can simply click on every dot and then we are jumping directly to specific slide let's do this now what we essentially want to do we simply want to map through our slides and create these dots this is why here first of all i want to create a div and this is a parent for our dots and now inside i want to write map and here essentially we just want to map through our slides and we're getting here access for every single slide and we also need an index or better to name it slide index and now inside we can write our markup and it will be just a simple div where inside we must provide a key so we don't get an error from react here we are providing inside slide index and inside i simply want to render a circle as a utf-8 symbol let's check if it's working as you can see in browser now we have this nice dots and we have exactly five pictures but obviously we must provide some styles for them first of all let's try styles for our container of the dots so let's name it dots container styles and what we want to do here we want to write display flags because in this case all our dots will be in one line so here we need display flags and they want to center them this is why here justify content will be sent and now we must style every single dot so let's write here dot styles and this is an object and inside first of all we need a small margin for example 0 3 pixels also cursor pointer and bigger font size for example here font size 20 pixels now we must apply the styles to our elements first of all here div style and here we have our container dots container styles and now here inside div we can apply style with dot styles let's check if it's working i'm reloading the page and now we see nice dots and we have cursor point on them but we didn't implement click event and this is exactly what we need to do so here we can provide on click event and here we can name this function for example go to slide but it is not enough because we must provide an index of the slide where we want to jump this is why here is a function and inside our go to slide we want to provide our slide index that we have inside our map now let's create our function go to slide so here is go to slide and as an argument we're getting here slide index and we can simply call here set current index and provide inside slide index let's check if it's working i'm reloading the page here and clicking now on the last slide and here we see italy now i'm hitting on the third slide and we see our forest as you can see it is not that difficult to implement your own image slider and also if you are interested to learn how to implement nested comments inside react application make sure to check this video also

Channel: Monsterlessons Academy

Views: 118,252

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: SK9AlIbexOE

Length: 16min 16sec (976 seconds)

Published: Tue May 31 2022