Make an Image Carousel/Slider with React | Beginners Tutorial

hello everyone in today's video we'll be learning how to make an image Carousel this is an amazing project for beginners because we'll be going through the HTML CSS and JavaScript of how this component works and it's a pretty simple component so if we look at the demo over here we can see that we can click on the buttons over here on the right to change the slide and then we can click on the left button to go to the previous slide as well and then at the bottom we have indicators showing the current slide and we can also click on them to choose the actor slide that we want so without much further Ado let's get started with coding this component so you will want to open up your IDE wherever you want to create the project and then you'll have to open the terminal in your IDE and then to get started we'll write down npm create wheat at latest to start our project and then it will ask us for the name of our project so we'll just go ahead and write down react Dash image Dash carousel we'll select react in this list and we'll select JavaScript and it will give us some commands we can run to get started so we'll CD into our project and then we will run npm install to install all the dependencies once that's done we have another dependency to install for our icons so we'll write down npm install react Dash icons once that's done we can start our project by writing down npm run Dev now our website will be run at the localhost 5173 and we can see that a basic boilerplate website has been started for us now if we look at the files and folders generated we'll see that there's a lot of stuff which we don't actually need so we can go down into index.css to begin with and we can begin by removing all of the default styling given over here so we'll just select everything and just delete it once we save that we can go into app.jsx and we can also remove this U State over here and everything between these app divs and we can just write hello world as a replacement so we'll remove the U State over here remove the logo that by importing and we'll remove the U State import over here as well we'll go ahead and save that and we can see the hello world on the right we'll delete this public folder over here as well as this assets folder we'll go into app.css and remove all the styling here as well lastly we'll go into index.html and change the title of the site and we'll just name it something like react image carousel and we'll go ahead and save that lastly in index.css we'll add some styling which applies to every element in our page so we'll do that by writing down asterisk and then we want the Box sizing for every element to be border box we want the default margin for every element to be zero and we want the default padding as well to be 0 for every element next we'll just add some default font family so for that we wanted to default to Aerial if it doesn't have that helvetica and then as it default we'll write Sans serif and then we can see that hello world is printed on the right with the correct font family now to make our Carousel component we'll actually need some data such as the URLs for the images as well as the titles for the alt tags so we'll go into the SRC folder and create a new folder where we will save the data and then we'll create a Json file called carousel data.json in that we'll start by creating an object and to it we'll add a field called slides which will be an array of objects so the first object will have a parameter called SRC we leave it empty for now as well as a parameter called alt which will be empty as well this will serve as the alt tag for our image component now for this we'll be using a service called lorem pixum which basically allows us to use their service by providing us with URLs for images and we can specify the width and the height of the images so we'll specifically be using this type of URL where we can specify a seed which you want to provide and based on that it will always give us the same image so let's go ahead and we will copy this URL over here and then we'll go ahead and paste this into the SRC field over here and for the seed we can provide anything we'll just write down IMG one we'll give it a width of 600 pixels and a height of 400 pixels you can choose anything you want and then for the alt tag we'll just write down image one for carousel and then we'll just go ahead and copy this a few more times and paste it so we'll have three images so for the second image it'll be image two and for the third image it should be image 3. and it'll say image 2 for Carousel and image 3 for carousel we'll go ahead and save that so now that we're done with making the data we'll actually want to go and work on the component itself so in the SRC folder we'll create a new folder and we will name it components in there the first file that we want to make is for our components so we'll name carousel.jsx make sure you name it jsx and not just JS for wheat to work properly we'll also make another file for the CSS and we'll just name it carousel.css then we'll go back into our jsx file and I have an extension which just lets me write down rafc and creates the boilerplate for the functional component we'll go ahead and save that and we will also import the CSS file over here by writing down DOT import dot slash carousel.css and we also fixed this error in the Json file which seems to be missing a comma over here so now that we made the initial component we'll go ahead and import it into our app.jsx file so let's go into app.jsx and then remove this hello world over here and then we'll go between these divs and we will add our component by opening the bracket and writing down carousel and then closing that off and then once we save it we can see that Carousel is printed out onto our UI now we actually want to obtain the data in our Json file and pass it down into the carousel component so we'll come to the top of the app.jsx file and import the Json file so we'll say import slides from dot slash data slash carousel data.json and we're importing slides because if you remember inside our Json slides is the first parameter in our object so we'll just come down here into carousel and we will pass it in as a prop so we'll name the prop data and for that we'll pass in the slides variable that we have now we can go into the carousel.jsx and we just have to take in that data prop um in our props list so we'll come to the bracket over here and just write down curly braces data and to begin with let's just log it out so we'll go down here before the return statement and write down console.log data and then if we come back to our browser and open the console we can see that the array has been printed out it's got three elements and we can see that the correct objects are inside each element at each index so now that we can log the data properly and we see that it's present we can go back to our carousel.jsx file and remove the console.log and now what we want to do is we want to show the data on the UI and to do that we'll Begin by removing this Carousel text we'll add the curly braces so we can add some code inside our HTML and we'll map through the data and at each index we'll take the item present at that index as well as the index that we are at and for each item we will return an image the images SRC will be equal to item.src and the alt value will be equal to item dot Alt and then for the key we'll just pass in the current index we'll go ahead and save that and now you can see three images are rendered out onto our UI which have been fetched from the lorem pixel service so now that we have the images being rendered out we want to add some styling so we'll add a class name to the div and name it carousel and then for each of our images we'll give them a class name of slide now that we've added the class names we'll go into carousel.css and add the Styles itself so we'll Begin by writing dot Carousel and adding the styles for that we wanted to display Flex we want the justify content to be Center we want the Align items to be Center as well and then we want the width to be 600 pixels and height to be 400 pixels this is what we had specified to the lorem pixel API as well and now we can see everything is in a row and then we'll add The Styling for each slide as well so for each slide we wanted to have a border radius of 0.5 Ram and then we also wanted to have a box shadow of 0 pixels horizontally and vertically but 7 pixels of blur and a value of hash 666 we wanted to have a width of a hundred percent of its parent and a height of 100 of its parent as well we'll go ahead and save that and you can see that the Styles have been applied to the images as well now that the slides are working we'll import our arrows and indicators so we'll write down at the top of the carousel.jsx file import DS Arrow left Circle fill and Bs Arrow right Circle fill and we'll import this from the react images Library so we'll write down from react Dash Images slash BS then we'll go to the top of our component return statement and below the div we'll write down BS Arrow left Circle fill and then at the bottom of the div we'll write down BS Arrow right Circle fill and we'll go ahead and save that and you can see that it's not actually being rendered out onto the UI right now so even if we refresh it's not visible and that's because we need to add some stylings for it to be on the top of the component and be visible to the user but before we do that we also want to add the indicators that are at the bottom of the component so we'll go below the right arrow and we'll create a span which will contain the indicators and then within the span we'll have to do something similar to the top where we'll map our data and for each element we'll take the item and since we're not using it we'll just set it as underscore we take the index which we are at and for each of those we will return up button and let's just add the parameters of the buttons so we'll have the key as the index that we are at and for the on click value we just want to set that as an alpha right now and we can fill that in later so we'll go ahead and save that and you can see that the buttons aren't visible as well so we really need to add The Styling for this so we'll Begin by adding the class names for each of these components which we've added and then we can write the Styles so for the left Arrow We'll add a class name and we'll set that to arrow and we also want to add a class name of Arrow Dash left and similarly for the right arrow we'll add a class name of Arrow as well as Arrow Dash right and then for the span which we have here we want to add a class name of indicators and for each button within the indicator span we want to add a class name of indicator so we have class names for everything now we can go into the CSS file and add the styling so firstly for the carousel we wanted to have a position of relative this is so that everything else can be positioned absolutely with the context of the carousel so we'll write down DOT arrow and we'll position it absolutely we'll write down position absolute and now you can see that the arrow is being rendered then we want to make it of a width of 2 RAM a height of 2 RAM as well we want to give it a color of white and it's a lot easier to see now both of the arrows are overlapping each other right now but we'll fix that later coming back to the CSS we want to add a specific styling for Arrow Dash left and we'll just give it a left value of one REM this positions it one REM away from the left of its parent component and similarly for the arrow Dash right we'll give it a write of one ram and now we can see the arrows are positioned as they should be in the final component now it'll be good for the cursor to be of a pointer once we hover over the arrows so we'll just say dot Arrow hover and then for that we want to just set the cursor to be a pointer now if we save that and we go back to our component once we hover over the arrow it's a pointer lastly we want to add a shadow to the arrows on the left and right but we can't just use the Box Shadow property and you will see in a second why we'll have to use filters so let's just add the Box Shadow property and we'll give it a value of 0 0 10 and just make it black and we'll save that and then once we click on refresh you'll see that the shadow is actually a square and not a circle so instead of using the Box Shadow property we'll have to use something else which is the filter property so we'll write down filter and the filter will be a drop shadow and into that we'll pass in 0 pixel 0 pixels 5 pixels and a value of hash 555. if we save that in refresh you will see that the shadow is actually a circle as it should be and then lastly we'll have the classes for the indicators so we'll write on dot indicators we want it to be a display Flex we want the position to be absolute with respect to its parent and we want it to be placed on the bottom one ram away from the bottom of the parent and then we'll add the details for the indicator class so we want it to have a background color of white we want it to have a height of 0.5 RAM and a width of 0.5 Ram as well and then we wanted to have a border radius of a hundred percent so it's circular we want the border to be none and we also want to remove the outline property so we'll set outline none and then we'll go ahead and save that and then lastly we want to add a box shadow of 0 pixels horizontally and vertically and a blur of 5 pixels and a value of hash 555 and we also want them to be spaced out a bit so we'll say margin 0 vertically and 0.2 Ram horizontally and we can see that they are spaced out and look as they should and then lastly we want the cursor to be a pointer as well once we are hovering over the indicator component and now we can see that everything looks as it should so now that we're done with the styling of each of these components we actually want to add the functionality where we can change the slides once we click on the Arrow or the indicators so we will go into carousel.jsx and we want a variable which controls the current slide which we're on so we'll import the use State Hook from react and then we'll come to the top of the component and say const slide which will be the variable and set slide which will be used to set the state and then we'll say use State and give it an initial value of zero so we start on the Zero with slide now to only show the slide which is at the current index we'll remove the class name over here of slide and instead we'll add conditional class names so we'll check if the slide variable is the same as the current index of this image we'll pass it a class name of slide otherwise we'll pass it a class name of slide as well as slide Dash in now we have to go back into carousel.css and write down the Style style for slide Dash hidden so we'll say dot slide Dash in and for that we just want it to have a display of none once we save that we can see that only the image at the current slide position which is 0 is shown to the user now we also want the indicators to show which slide we're currently on so let's add the functionality for that so we'll go back into carousel.jsx instead of having a class name of indicator we'll have also a conditional class name and we'll check if the slide is at the current index if it is we'll just pass in a class name of indicator otherwise we'll pass an indicator as well as indicator Dash inactive now let's go ahead and add the styling for this class in carousel.css so at the bottom we'll write down DOT indicator Dash inactive and for this we just want to set the background color equal to Gray and if we save that you can see that every indicator has been grayed out except for the current one now that we have a way of indicating with slide we're on we want to be able to control the slide we're on using the indicators and arrows so we'll go back and add two functions const next slide as well as const previous slide now what we want this function to do is take the current slide value add 1 to it and then call the set slide function using that variable so we'll just State set slide and slide Plus 1. and similarly for the previous slide function we'll just write down set slide slide minus 1 and then we'll go ahead and save that now we want it to be called when we click on the arrows so we'll go to the left arrow and say the on click function should call previous slide and on the right arrow the on click function should call next slide now we'll go ahead and try this and we will get an error I want you to predict what the error will be before we get it and then we can work on fixing it later once we encounter it so we go to the right to our component and once we click on the arrows everything works properly but on the last turn it just shows a blank page and that's because the slide variable it has gone from 2 to 3 while we only have three elements so it's pointing to an index which doesn't exist and since no image matches the condition where we're checking slide equal to index it's not printing out any image at all so to fix this we want to set this variable conditionally so instead of just setting this variable like it is we'll first check if slide is equal to data dot length minus 1 which is the last index we'll wrap it around to the first index which is 0. so we'll wrap it around to the first slide otherwise we'll proceed as is similarly for the previous slide function we'll check if the slide variable is equal to 0 if it is we wrap around to the last image otherwise we'll just subtract 1 as it is and then if we save that and refresh and try again it works as required and then after the last image it wraps around to the first image and before the first image it wraps around to the last image and it works as we expect it to so now that that's done we also expect to click on the indicators and go to the correct slide so let's add the functionality for that and it's pretty simple so instead of having an on click value of equal to null we'll just say an anonymous function Arrow function which calls set slide and sets it to the index of the button which has been clicked and then if we save that and refresh we the arrows work as they did previously but clicking on the indicators also changes the slide that we're currently on so that's it for the component we we should just Center it to the middle of the page for presentation so for that we just go into app dot CSS and we'll add a styling for the dot app uh class name so we'll come to the top and write on dot app we want it to have a height of a hundred percent of the viewport height so 100 VH we wanted to display Flex we want the flex direction to be column we want it to justify content to Center and we also wanted to align align items to Center as well and that presents the component as it should be in the middle of the page and that's about it for the component we can click on the arrows to change the current slide up and on and then we see the indicators and we can also click on them to change the slide that is being shown so that's about it for this tutorial I hope you liked it if you did do like share and subscribe and if you have any other ideas for tutorials please do comment down below

Channel: Code Complete

Views: 33,604

Keywords:

Id: QpsGo8kZiTo

Length: 23min 33sec (1413 seconds)

Published: Sat Mar 11 2023