React JS Carousel | Create a Wonderful Autoplay Carousel From Scratch

hello everyone welcome to another video and today we are going to create this wonderful and incredible carousel so it may seem complicated but actually it's pretty simple so i tried my best to keep the code as clean as possible so anyone can follow along and as you can see it has an autoplay and if i hover it it will stop but if i move my mouse away it will begin again okay so in here we have the arrow keys we have the dot control so i made sure to include all the basics of a carousel and i'm pretty excited to make this tutorial so let's begin so let's begin installing the react app okay so to do this we need to type npx create react app and then we need to say in which folder we want to install the react so i'm gonna type youtube carousel 2 and then i'll press enter and now it will install all the dependencies that it's needed to run react if this command doesn't work you first need to install node.js okay so just okay so you can just go to google and type node.js and then you can install the latest version of it alright it's finished and now we just need to run this cd and the folder you choose to install your app i will just copy and paste it and then i will start code vs in this location so the type code space and dots so it just opened here and now i'll just open the terminal and then i will type npm start after running this command the web browser will open and this is the react page okay so we just need to remove some files there are not necessary so we will just remove these ones we'll delete and then i'll go to index.js and remove this report web files these two and save it and then i will go to app oh i forgot to remove one thing in here let's remove index css as well so we just remove this and in app.js i will just erase all of these and just type um reload what and now we remove the logo as well so this is what we have and it's centralized because we have css in ape app.css when we move and then this is what we have so now this is a clean installation of react and we are ready to begin so i've already selected some images so we don't lose a lot of time and i will create a folder in public i'll call it images and then i will paste all the images okay and i got all these images in pixabay so this is the website i just search for them here and copy and rename it and if you want these images you can access the code in the description so now we are ready to begin so i will move this we will start um creating a div called top content and if you don't have this embed abbreviations you can just go to your vs code extensions and install this one yes 7 plus react redux and react graph i grab something i don't really remember but it's this one you just have to install it and after this you have this emit abbreviation and now let's create a header there are called places to meet and just put some paragraph if you want i'll put this one so if you want to support the channel just like and subscribe okay and in this end i will type html abbreviation i will call and so this is the the way to tell html to write in n percent okay of course this is not html is jsx but but it's simulating html okay and now we can just say that we will put a carousel in here okay but first of all let's create our component so in src we create a new folder called component and then let's create the carousel dot js also we will create another folder style just to make our all organized okay and create a carousel.css um here in the carousel.gs i will use another emmett abbreviation so i would type rfce and then they will create a react functional export component okay so it's a easier way to to type all this initial code i'll remove this because it's not necessary anymore and i'll save it and now i can call it here in the app so i just type um carousel and then i will put my my cursor in the end of the world and then i will press ctrl and space and it will appear the import so it will import here and now if i save the carousel it's appearing in here okay and in carousel i can just import the css so typing parts dot dot slash and then style slash carousel dot css okay so just to check if it's working i just type all and background color thread okay it's working sorry about your eyes now we are going to create the data that we are going to export into the carousel okay so here in component let's create a data.js and in here we are going to type export const countries or any name you want okay of the array and then equals to an array of objects okay so type the braces and then the curry braces and type enter and and i will put an image since the images are in the public folder we don't have to type the dot dot slash to come back because we just can't leave the src okay so just to go to the public i just have to type the slash okay so now we are in public and then i have to type images and then the name of the image okay dot pg and then comma and the title that we are going to use okay so type brazil so this is one object now i will create the others so we don't lose time so these are all the objects that we are going to use in our carousel all right and now let's go back to our app.js where we are calling the carousel and let's call our data let's import and countries from dot slash components slash data all right so now i'm going to pass these countries directly to the carousel through props and doing this way we can reuse this component this carousel components as many times as we want and we can use different images as well i've typed images equal to countries now we are passing all these images to the carousel and it's giving me an arrow because um this way that i'm using the import is only if i was using uh the default word in here okay but i'm not using so i need to put um inside of curry braces so now it's all okay and if i come back here in carousel and type images now i'll have access to to all these images that i'm passing through here all right and after that we have all we need to create our carousel so let's remove this and in this div i will i will give a class name of carousel you type enter and now we are going to map through our images so i'll type curry braces and then images dot map parentheses and then parentheses again to create in our function type the arrow curry braces enter and in here i will call image so this map function is responsible to give me access to each one of the images inside this array of images and then i can choose the way that i'm going to show all this information so just to show you i'm going to return a div with the title so i type image dot title so here you can see all the titles of the images okay so here um brazil china france japan no re there's a sign of that everything is working correctly but if i open my dive tools and see the console you see there that we got and warning so each child in the list should have an unique key prop so to fix this i need to put an index in here and pass it to the first div that we are returning in the map function so type key and then type index so if i save and if i update the arrow is gone so just erase this and i will give this div a class name of carousel cards and i'll just put all of this inside a carousel wrapper i just forgot to do this carousel wrapper and let me just put all of this inside okay so now we can call our image i type image and the src will be image dot image so if i save it all our images are here and then i will create another div called card card overlay and a2 called card title so this card overlay will be responsible to hold our information that will stay above the image okay so in this case we will only use a title but you can put other informations like description tags so you just put image let me just um image dot type okay so the title is here everything is working and now we can start styling a carousel so first of all let's put some basic css here in app.css so let's put some rules here um i'll type margin 0 and padding 0 and then box sizing butter box and after this when i save it all margin and padding will be removed so just put some css in app let's put the background color equals to f5 f5 f5 just so it doesn't stay so white let's display flex justify content in the center and align items in the center let's change the flex direction to column so the place to meet is the above the carousel and let's type the weirdest of 100 v w and the height of 100 vh so we can just see all the content but we will fix it so let me just comment this for now just so we can fix the the top content and now let's just take the top contents we'll put some margin bottom and a font size let's make it bigger let's align the text to the center and let's put a color of steel blue okay so we finished this and now let's let's just uncomment this because we'll fix this in the carousel.css so now let's begin to style our carousel let me close these these these um let's begin with the carousel so let's type display flex and put some fixed height and some with it of a hundred percent and a max width of 800 pixels now let's tile the carousel wrapper let's put the position relative so we can work with the overlay in a absolute position let's put the width of 100 and a height of 100 percent okay and now let's style the carousel cards let's display flex and then we put flex 1 so we take auto available space let's put a position of absolute so all of them stay above each other so how we are going to do this um we are going to put all of them above each other and we will only show the current card uh let's put the width of a hundred percent and the height as well and now we put an overflow hidden um some border radius or 20 pixels and now let's create a shadow okay so to do this let's just go to a shadow generator let's go in here and in here we can create a shadow let's just make it simple just let's just remove the opacity um you just pass the spread increase the blur and here let's just put zero and zero okay so it's okay for me so let's use this just copy and paste now if i save it here's the shadow but it's too too dark let's just put it in lower opacity maybe here so now it's better and now let's just style the image in here we didn't put a class so let's put in here um cards underline image so let's just take this class put in here and let's just say the width of a hundred percent and object fit cover now this is looking like this because we didn't style the overlay yet we are going to do this now and of course we didn't save in here so okay let's tile the cart the card overlay oh my god i keep saying cards uh let's do the position of absolute and now we can see there is pattern here under width of 100 and the height of 100 the background color will be a black rgba of 000.5 okay so be a black with 50 of opacity and then we are going to display flex so we can position easily the content let's just put some padding 40 pixels on the top and bottom and 30 pixels on the right and left and let's just align items in the end so flags and okay so the title will be down here and the last let's just type the cards title let's just put it here and just change the color to white and that font size to 30 pixels all right now that we did all this styling let's just start working on the logic later in the video we are going to implement the controls so let's go back to the carousel.gs and we are going to create a simple condition here in our class name of a carousel cut so i will just cut this and then i type curry braces index equals to anything let's just say 2 question mark and then a condition if it's true if it's true the class name will be carousel card and carousel card dash active but if it's false if it's false it will be only carousel cards so this is a ternary operator if you don't know what it is it works just like this so i'll give a condition okay condition and you type question mark and you say if this condition is true i'm going to do this if it's false i'm going to do this so basically the same thing that we are doing here if index equals 2 then the class name will be carousel card and carousel card dash active but if this is false it will be on the carousel card so if i save nothing will happen because we didn't style this carousel card active so let's just copy and let's just do this now so let's just type um opacity one so it will show just like this okay and transform scale 1 and pointer events visible and now we can add some profits to this class so i'm going to say that the initial state will be opacity 0 and pointer events noun the transform will be scale dot 8 and the transition will be 0.5 seconds easy and out okay so if i save this it will show the second card okay and if i change in here if i type one for example and we show the first one if i type zero it will show the zero one because the index begins in the zero okay so this is the actually first one and then the second and then the third and i think you got it so this is the basic logic but we won't compare index with a number with a fixed number we use any state so we can so we can modify this state using the controls or the autoplay okay so let's just create this state let's just type const and we call it current and then set current equals to use state state so i just choose this one it will import in here and then the initial stage will be zero now i can just change in here so the two i will put current and now we are going to create the contours so in here let's just type um dot carousel arrow left and i won't use any icons okay i'll just use the html syntax so i'll just type ampersand l s a q o and a semicolon okay if i save this it will just show in here but you can see because it's too small okay and i do the same just i just press alt shift and the arrow down key to copy and just change this to right and this l to r so the both are here but we we can see let's just style them so it will be easy to see them okay so let me just copy here i'll put some styles to both of them and just put the dots and the position of them will be absolute the font size will be 40 and now we can see them in here um the top will be 50 and i will transform just to put it in the middle so translate zero minus fifty percent the background color will be games borrow i will display flex justify content to center and align items to center just so the the chevron is staying in the middle when i limit the width and here and in here the width and the height so if i remove these properties it will stay down here so this is just to centralize them for the radius of 50 and a padding bottom of seven pixels because it's not really in the middle so now it is and the cursor will be pointer so when we hover it it will be clickable and now let's put some style to then individually start with the left key the left arrow i will put left 15 pixels and then we just copy this and paste let's change this to right and this to right so now that we have our errors we can implement the logic so every time when i click it i want to run a function so to do this i'm going to put on click in here and then i'll say slide left and in here i will say slide right if i save it it will give you an arrow because i didn't create um this function so let's create them let's put them in here const is light right equals to an arrow function and now just copy this and paste this will be a left okay so now if i save this the arrow is gone and now every time when i click these buttons i want to increment or decrement this current state okay so to do this i would say set current and i'll just say current plus one and in this left slide i just copy and say current minus one so if i save it and if i click everything is working just fine but let me just put a console log in here so current so to show you what's happening i will just put a console log in here and let's just console the current okay i will i will open the dive tools i will open the dive tools and in here you can just see that it's showing zero okay if i hit the slide right it will show one two three four but when i reach the five it will show nothing the cards the the current will keep uh incrementing if and if i go to the other side it will keep decrementing so we need to implement some restraints so when it reaches the beginning of the array it goes to the end and when it reaches the end it go back to the beginning okay um to do this let's put an if statement and let's let's just check if current it's equal to the end of the array okay in this slide right images dot length minus one because um in this case the current is going to from zero to four and the size of the array is five so that's why we need to check if current is equal to the size of the the array minus one okay and if it is it will not run this command it will go back to the beginning of the array okay so let's just type zero and else let's just type this one so i will just save it and now if i go to the end just watching here it's in four if i hit again it goes back to zero this is the bigger way to set it but we can just use a ternary operator in here as well so i'll just say set current and let's just put the ternary operator inside of the set current and this is the condition if current equals to image dot length minus one let's just put the ternary operator and if it's true put it equal to zero and if it's not let's just put it equal to current plus 1 now we can remove this let's save let's check if everything is working and now when we go to four it counts back to zero now we just need to do almost the same thing this light left it's not the same logic but i guess you understand it so let's just set the current and now we need to verify if current is equals to zero if it is it will set the the current to images dot length one that is the the end of the array and if it's not it will say current minus one now just remove this i will save and if i go back it's already in the beginning if i click it goes to the end of the array if i click in here it goes to the beginning so now we have a infinite carousel this is awesome now that everything is working with the arrows control we can implement the pagination to do this let's create the pagination i will just create another div and i will call it carousel underline pagination and in here we are going to loop through the image array all again so each dot of the pagination will represent one image so let's just type the curry braces images dot map and then let's just create an error function [Music] and in here we won't need the first argument that is the image in this case so we just put an entire line but we'll need the index so let's just return additive active here and let's just put the key equal to index and in here we're going to implement the same logic that we used here in the primary images map so i'll just copy this the class name and then i will paste it in here i just save it so it organized and now i'm going to change the name of the classes so this carousel card i will just select it and then i will press ctrl d so it select the next and then ctrl g again so it select the next and in here i'll just type pagination underline dot so if the index equals the current this div will receive the classes of page station dot and imagination dot active but if it's not it will receive only pagination dot so let's just style this classes just save it and let's just go to our carousel.css i forgot to copy carousel pagination and then let's just type position absolute um bottom of five pixels a left of 15 percent 15 percent and let's just centralize it put in transform translate minus 50 and 0. it won't show anything because we haven't styled the dots but now we are going to do this um pagination dot now let's just put a height of 10 pixels and a width of 10 pixels and then a background color of 5 f 5 f 5 f just save it and now the dots are here not yet dot but they are here so let's just put a border radius so they can look like dots of 50 percent let's just put a display not block but inline block add some margin to the left and a cursor pointer so it looks like it's clickable okay and now let's just style the pagination dash active let's just paste in here and now just transform when someone hovered so it's cut scale up of 1.2 so it sorry not this one this is not the active let me just copy actually it's the hover okay so when i hover it it just gets bigger and now let's just style the pagination dot active and now just change the color to still blue i put 2.2 dots in here so now it's working so now when i hover it it just looks like it's clickable okay but if i click it it's not working yet because we didn't implement the logic but if i press using the arrows it's working as you can see and it goes to the first one so now let's implement the clicking logic in the pagination okay so it's pretty simple i just say that on click i will run an arrow function because i will just put it here because it's just in one line so i will set the current to the index the index of this of this pagination map so each one have it an index that is corresponding to the respective image okay so if i save it this is the first image if i click it that will show the second and the third so it's working pretty fine and now we just have to implement the auto play logic so to do this we are going to create a new use state i'm going to call it um auto play and then set auto play and its initial state will be no now i'm going to use a infinite use effect to keep calling it okay let's just type use effect i will choose this one so it can import and then i will just put parenthesis and then an error function and usually you put some restrictions in the user factor okay but in this case we are not going to do this because our restriction will be using a set timeout so just type set time out okay and this function is basically like this it will always run a function that we declare okay a certain amount of time so i just type 2500 okay it's 2.5 seconds it will run this function and since i didn't limit this user effect it will run infinitely so this function will be an error function and now we just call slide right so if i save it we can see that it's working okay it's 2.5 seconds it will slide to the right but if i hover it nothing will happen because we didn't create a logic to stop when the mouse enter or the mouse leaves the carousel and to do this we are going to create a variable called time out so this timeout will be responsible to hold this set timeout and we are going to put a condition based on the autoplay so let's just say the timeout time out will be equals to this set timeout only if the autoplay autoplay is true okay so i could just type the ternary operator but in react we have another operator that works just like the tenari operator but it don't have the false statement so using the end operator this condition or rendering i would just say that if autoplay equals to true then you just give this timeout this value okay but if it's false it won't do anything it'll just say no it's basically this so if i save it nothing will happen because we are not controlling the autoplay all right but if i just say um autoplay actually it will stop because i put the wrong value in here its initial state will be true so now it's fixed now it's working just fine and if i put false it will stop all right let me just say true because we are going to use the mouse the mouse enter mouse leave to control the statement and you are put this condition in the div of the carousel okay so let's just say on mouse enter just create an arrow function that will say that you say set auto play to false and on mouse leave let you just set it to true just put in here set auto play to true so now if we test it let's just wait if i put my mouse it will run again and then it will stop okay and this is not really what we want because this is strange it's like it's delaying it's like it's lagging so it's not common it's not really good to the user and to fix this we need to clear the timeout every time we hover with our mouse okay so we just have to clear this variable every time we hover it so let's just type clear timeout of this variable that we just created let me just paste it and now if i hover it it won't run again okay so it won't look uh like it's lagging or something like this so this is it for the tutorial of today i hope you like it if you like it don't forget to smash the thumbs up and subscribe to the channel and i'll see you in the next video bye bye

Channel: Johan Alves

Views: 9,010

Keywords: react js carousel, react js carousel autoplay, responsive carousel react js, testimonial carousel react js, how to add carousel in react js, reactjs carousel autoplay, build a carousel in react js, react js card carousel, react js slider component, react carousel from scratch, carousel using react js, carousel with react js, react js image carousel, react js infinite carousel, react js image slider, carousel in react js, image carousel in react js, johan alves, j83@h@#

Id: SAWQ_LmyY2Q

Length: 41min 22sec (2482 seconds)

Published: Thu Jul 14 2022