Build a Slider with React.js

hello creative people today we are going to build a slider with react so a pretty simple react slider with a lot of features we can click on the different button we can click on the dots right there and it will just change the different image okay so let's cut it right now okay so as usual i will put the source code in description so you can grab it and use it as you want so right there we just have a pretty simple create react app application and inside it we have a components folder inside that folder we have a slider folder and i will just keep the css here we will focus on the logic parts and yeah we will just uh keep the css right there we are not going to code it uh and we are going to create a slider dot gs right there so this will be our component and we do have a data slider right there with some id from uid this is a pretty useful package from in npm and there is some there are some text right there but i will explain it a little bit later so we do have our data right there because usually it will come from an api or from some backend or stuff like that so right there i i just create some some data here in our our components and then we just have some icons there and for the images this is the same as the data usually it comes from an api or from from some back back-end they can from some back-end and right there we are going to be full front-end so the different images are in the public folder so we can reference the different paths from the from the image okay so this is why i put some images right there okay so great we can start there we can start so i will just start the live server okay this is great this is working so rfc tab and right there i will need use state i will also need the css so slider.css and we will import btn slider for the two btns from btn slider but right now we it's not here uh it's not here but we are going to create it a little bit later but we do need the data slider all right so we will just import it right there okay great so we will focus at first on the ui so we can just go over there and add class name container slider great and we will display the different image right now because we do have imported that data slider so we can just use it right now so data slider dot map obj index from the map method and we are going to return to return div right there okay but inside those div we will have some image okay some image and for the source and alt attribute there we don't need to feed it but the source is important indeed we are going to add process dot and dot public url url okay plus backticks slash images slash image dollar and you just open the curly braces index plus one dot jpeg okay so what the hell was that we are just here referencing the public images from the public folder so you just need to put a slash right there and then you can do some dynamic pass and we do need to add process that ends that public url because when you are going to build your application when you are going to build it uh when you are going to run npm build right there well you need to add your your custom url right there so it will just add for example www.yourwebsite.com right there okay so you need to add that so you can reference your image when you are going to build your final folder so this is okay for the image great you can import it in there so import slider from dot slash components slash slider slider and just use it the slider and okay so this is working but we need some other css so actually we need to put a class name on the div right there and we are going to write their slide like that okay slide and slide reference this class actually but the opacity is set to zero so if you put one you are going to see the the image right there so it's working but for our animation purpose we need to start with zero right there okay great so now that the different images are there they are there actually but we just can't see them we can add the different buttons so we are going to go below the image and add btn slider so i can zoom in btn slider like that okay so we are going to put two btn slider we can uncomment this and create that btn slider okay so inside slider i will just create btn slider.gs okay and now it's time to just create those btn so element type is invalid expected string from okay yeah you just need to create the components right there and okay it's working great okay great so we are going to use that component for the two button on the left and on the right so we need to import slider.css and the left and right arrow so left arrow from dot slash icons slash left arrow dot svg okay and we are going to take also right arrow and right arrow okay great so now inside it i want just to return a button okay so a button there and there and i want to add a class name class name equal btn slide like that and inside it i will just put the different images so we can just remove that and we are going to put at first uh just right arrow to begin okay and yeah this is the basic stuff right there so you can see that we do have one button right there but there are no logic there we need to create some state and everything and pass that state through the props to change the style of our button okay so we are going to do that right now so we can just close close and go right there so const slide index and set slide index equal use state and we we are going to make the state start at one okay just one right there now that we have our state we can create two things the next slide function and the preview slide slides function so const priv slide right there great so we can now pass those function right there so on the first one we are going to pass the props move slide will be equal to next slide and on the second move slide will be equal to pre slide okay and also we want to add the direction the direction right there so uh direction equal next okay and below direction equal thread like that okay great so we do have function and direction so we can go back to btn slider right there and we are going to take them from the props so direction and move slide we are just doing some destructuring right there so you can log it if you want direction and move slide and you just open your console and so i'm just going to yes just to actually actualize it so we do have one error right there but we will solve it and you can see the different props right there so it's working right there we need to add a unique key prop right there so you can add key equal obj.id which is a reference to data slider and the different id right there okay so now we should not have error anymore great this is working this is nice and now we can just say on click on the different button it will just trigger move slide from our props props and we do want some dynamic classes right there so direction equal next question mark if yes i will just add btn slide next and if it's false i will just add between btn slot slide prev like that okay so now we do have our button and there is a next button and the previous button so it's working just great and we do need to change the ssrc right there we do need to change the source to so we will just change it right there direction equal next question mark if it's true i will feed it with the right arrow and if it falls i will fill it with left arrow great great we can see our two buttons and it's working we're we're just doing a lot of conditional rendering and yeah this is the magic of react okay so now we do want to change the class name of that div right there also so we just say slide index equal index plus one because index from the map function is starting at zero so to compare it you need to add plus one each time so question mark if it's true i will just add slide and active anim if it not i will just add slide like that okay great so now we can see our image okay because we do have our animation and active anim and active anim is just right there with an opacity of one so yeah this is great this is great now we want to just create our function right there and the logic of our function so when we are clicking on the button we want to just trigger next slide and prev slide so right there if slide index is strictly different than data slider dot lens i will set slide index to slide index plus one so this is the case when i'm just clicking on the next and when slide index so this is inferior to 5 because that's a slider dot length is the all my images are right there so this is the length of of my array okay so if slide index is inferior to 5 i will just go on the next image and else if else if so you can put it down if you want else if slide index is strictly equal to 5 so that has slider dot length okay i will reset it with that reset i hope this is a nice pronunciation to one okay so if i'm at the limit of my array so i'm at the last image i will just resit reset reset to one okay so to the the first image great so let's try it out i will just click right there so you see it's working it's working and i will just go back to the beach right there you see every time up to the beach okay great great so now we can do exactly the same right there for the previous slide if slide index is strictly different to 1 set slide index slide index -1 because this time i click on the previous button else if slide index is strictly equal to one and i want to click on it i want to go to the previous slide when slide index is strictly equal to one equal to one well i will just go to the last slide so set slide index data slider dot length right right there okay so let's see up i'm at the last image right there okay so this is working up last image last image okay this is really important to put data slider dot length right there because we could change it with just five and it will work actually because the length of our data is five but to make it more dynamic you need to put data slider.length so just imagine you have some more images right there well it will just um adapt perfectly so right there i put some text and title subtitle etc so you can i'd some text right there if you want you can add you know something from the object uh for example object title or stuff like that okay and you will see something you will see something uh maybe it's behind it actually so let's just see yeah it's just right there so you need to uh put some position absolute and just put it at top zero for example for example and you will see the the text okay so if you want to add some text dynamically you can just use this okay great great so this is working we do need one last thing this is the little dot at the end at the bottom of the slider so we can just go there and create div dot container dots and inside it i will create an array with ray dot from and i will put an object inside length with the property length five that this will just create an empty array with a length of five and so i can use the map method with that okay this is a little technique so dot map right there and i will use item and index parameters right there and i will return a div inside it with the dot class right there okay so it must be working yes great we do have our dots so we are just creating an array right there you can log it if you want look log array dot from this is an underground technique you know just to yes you see that array with undefined undefined undefined and defined so it has a length of five and so we can use map on it to create our five uh five little dots right there okay great but we do want some indeed dynamic uh class name right there so we are going to just create it so class name equal slide index equal index plus one question mark if it's true so i will put the dot and active class if not i will just put the dots class okay so you see that now it has that class that active class so we do have one little black spot right there because we are at the first index and so we do want to click on it and to navigate with that click so for that i will just add an unclick on click equal and i will put an anonymous function that will trigger a move dot and give the index plus one argument right there so i will just create it and then i will explain it to you so const move dots equal index so parameter index and it will just set slide index index so when i click on one of my little dots it will trigger move dots with the index plus one remember a map there will give us the index but it will start as zero zero one two three four okay so we do need to add one to it so it will be the same as the index of just the set index right there at the the same index as the image if you want so it will trigger move dot with the right index and we will navigate for example to the third image up to the fifth image and to the second image etc etc okay so when you want to call a function there with an argument you need to trigger it with an anonymous function anonymous function okay so if you just put the function right there it will trigger a move dots when the component is created when this is parsed it will trigger move dot and we don't want to do that okay we want to trigger it only if i click on my dot well that's great that's finish that's finished yes yes i hope you liked it and yeah this is a pretty nice component actually this is pretty pretty nice to do yes some really really easy stuff when you know what you are doing right there so i hope you've understood me and yeah see you next time for another quick tutorial ciao

Channel: The Web School.

Views: 97,908

Keywords: React, React.js, Slider, How to build a slider with react, Coding a react slider, carousel react, carousel, slideshow react, slideshow

Id: og3wCO98HkQ

Length: 18min 48sec (1128 seconds)

Published: Mon May 31 2021