How To Build A Simple Slider - React & Tailwind CSS

welcome to the coding Loft my name is Samuel and today we look at a small fun project where you will learn how to build a reusable slider in reacts right here you have a slider consisting of several images you have the previous and the next button and then you can click them to switch between different slides and you know once you reach the maximum number of slides you go back to the first one and it works of course in both directions so we're not going to use any pre-built slider package but instead we will build our own slider logic and we will also use Tailwind because it works really well with react so let's Jump Right In thank you to get started you will need node.js and npm installed make sure you have those and in this video we will use the wheat to create our react app and we will do that by saying npm create Veet at latest and then you have to give it the name of your project in our case we just call it red slider but you can name it whatever you want it will ask you for the template so we'll say react we will use JavaScript for now and now it has created a project you can see that we can go inside the project by saying CD react slider now we're inside the project and we can install all of the dependencies by saying npm install and after a short moment everything is installed now we can open this up in vs code and then we can run our development server so to start it we say npm run Dev so this address down here I can now see my react project so now it's time for installing Tailwind so head over to the Tailwind documentation link is in the video below and they have a really great documentation about pretty much everything you can do with Tailwind so here's about the installation of react and wheat and as you can see that's what we just did this Command right here so now we need to install a Tailwind so let's just copy this code right here and paste it in the terminal and then we can configure the template path so simply by going to tailwindconfig.js so in the content section we just specify the path where we can use Tailwind so let's just replace the content part here save it and add all of these three lines here into the file called index.css you will find it in the source folder so let's delete all of that we don't need it for now and paste it in now our development server is already running so let's quit that and let's start it again so now we say npm run Def and you can see that the layout has completely changed because now Tailwind is active and we've also removed the basic CSS from before let's continue by removing all of that stuff we don't need so everything here inside of this diff container we can basically just throw out also up here delete it and we don't need this use date up here either we can also delete all of that here inside of the assets folder let's just remove react.svg and instead we will add our images inside this assets folder we have this folder with five different images and you can find them in the GitHub repo but of course you can use your own images as well so let's drag them in there now we have five images inside of this assets folder and we can import them now in our app component so let's say import images and then we import them one by one so import Hills from and then you specify the file path assets slash Hills dot JPEG and now you repeat it with the other images as well now the way that images and react work is that you have to import them first as an object and then you can use them in your application so you don't specify inside the application the path to this assets folder but instead you import them up here and then you can use them in the application so inside here we will create an images array called images and it's an array of these five images all we have to do now is say here's Mountain Lake Seaside what are the other ones stream and Valley and now we have an array consisting of these five images and the reason why we put them into an array we want to pass them into our slider component as a prop because that way we can reuse the slider inside of our app with different images now the next step is to create a slider component so say slider and I already have told you that we will accept these images as a prop so we will pass them down inside of our component and remove app.css up here and a small typo up here so make sure that you have the correct name so it's mountain lake with a dash and as you can see nothing is happening of course because we don't have a slider component yet so let's create it so we will create a new folder called components and in here we will create a slider component slider.jsx now I have this extension called Simple react Snippets make sure you install it because what you can now do is once you're inside of the component you just press FFC and it creates a basic functional component layout so now we have the name slider that we pass in and in here we have something which will be our slider component later for now let's just say my slider and we still don't see anything yet because as you can see right here reference error slide is not defined inside of our app component we first need to import it so let's import our components you don't need to make these comments but I just find it more readable for later especially if you have more complex apps so import slider and just click here and it will autofill everything and now you've imported the slider component now you can see that my slider is what we passed in down here and you can also see that we've passed in this images array so in order to use it in our component we need to accept it here as a prop and the way that we do it is with an object restructuring so we just say images that's the name we gave it now we also want to give our slider a title so for now I will say our nature trips and again we need to accept this as a prop here so we say title like that and that's all we had to do inside of our app component now let's just delete this up here we don't need it and let's just create our basic HTML layout so we have a div and we give it an ID of slider we actually don't need this ID in our use case right now but it's just for readability and it makes it clearer where everything is in our application so class name we will also specify in a second and we start with the title prop so that will be the title property that we passed in so title our nature trips you can see that it's now here on our screen and below that we want to first of all check whether the array is actually there so if there are no images we don't want to show anything or we can show an error message or something like that but we don't want to show the slider component so if images exist then something should happen so we do it simply by saying images so when images exist and we have this double Ampersand which evaluates this condition so the condition in this case is images should exist it should not be undefined null or empty and if that's the case then then everything behind the Ampersand will run so in our case that will be a div and that will be class name we give it slider or container again we don't need the class name right now for our use case but it just makes it more readable to understand where everything is so here we have the whole slider and here we have the slider container and inside of our slider container we want an image because the slider container will wrap our image and then below we will have our buttons which will be an a tag with a class name of button pref and button next again just for readability and now you can see that rag is actually throwing an error because we have this div and this anchor tag because after a conditional rendering as we have right here we just need one element so that's why we will create a fragment and then we put everything inside there okay now we can see the error is gone and Below we have another anchor tag with a class name of button next and we will pass in a smaller and greater science and the way that we do that is saying Ampersand less than semicolon and down here we say Ampersand greater than semicolon and now we have these two signs less than or greater than let's pass in an image as a source and for now this is just for demonstrational purposes because we will select a specific image later but we just want to show one image but first let's finish the styling and then we will jump to the logic of the slider so we start with this div with the idea of slider so with the class name what do we want to do well first we want a flexbox because we can then align the items and we want Flex column because that will align them top to bottom now we say items Center and justify Center and everything is now aligned in the middle as you can see we also want the light red background you can choose any color you like but I always like to see inside of our project where the slider starts and where it ends and to make the view more readable you can press alt Z and then it will wrap to the size of your window in vs code now you can find all of these class names inside of the Tailwind documentation it has a fantastic documentation so you know whenever you don't understand one thing let's say item Center you can just look for it and then you will find where to use it and how it's applied so anything that you are not sure of you can simply look up here for instance the width of an element and it will show you all of the different classes you can use to adjust the width of an element now let's add some padding simply by saying p-8 and we want it to fill the full screen you can of course change it later let's change the look of our titles so we want a large text so we say text 2XL as well as a different text color so text slate 700 looks nice and we want the font to be bold so simply say font bold and then margin bottom of four I just realized I made a small mistake so what we will do is we will actually make a div out of this fragment so let's say div up here and div down there and we will give it a class name of slider container this here will actually be slider image and the reason is we want to position these two buttons absolute to this slider container so the way that we do that is by saying relative here and then for the buttons we say absolute so let's continue with our slider container so as I said before it's relative and we also want again to use flex and flex column to align our items inside of it because then we can very easily Center them with item Center and justify Center and now you can see that the buttons that we have defined up here they're now exactly in the middle we will change that in a moment don't worry now let's make sure that it spans the full width of the screen so with screen and how it falls so that means a height of 100 let's continue with our buttons because right now it looks very ugly the way that they are here in the middle so we say up here absolute we want to position it on the left so left five I want to give it a background of white a padding of two and make the corners around it but now you can see it's not really a circle but more of an ellipsis in the way that we change that is by giving it a specified width and height so let's say width of 10 and a height of 10 and now it's exactly round and you can also see the arrows a little bit on the left so we can simply change it by saying flag so we make it flexbox and then we justify it to the center now we can simply copy that later part here and we will paste it to our next button but of course we need a different side so we don't want it on the left side but on the right and maybe for larger screens we want to have it more on the right so maybe left 10. so you can specify A Min with property so you say small and everything above small will have a left 10 attribute to check the exact number of pixels that small actually refers to you simply can check the Tailwind documentation so we do the same here and then again we also change it to right so now when the screen is bigger left 10 is applied and below that left five now it's time to change the way that our images look so we want to fit them inside of our slider image container up here and the way that we do that is that we set the slider image to a Max width of screen medium which if you check the documentation refers to a specific number of pixels if you want to know what it is so simply look at the documentation Max width and then you can say down here Max with screen medium means that you have a Max width of 768 pixels now our regular width should be always a certain percentage so there's 10 over 12 so by specifying the Maxwell's probability we just make sure that it never gets above that 768 pixels we want rounded corners which we don't see yet but you will see in a second if we add overflow hidden now we have the rounded Corners that basically means that everything inside of that container cannot flow outside of it so inside is just this image we want the shadow XL so we have a certain Shadow down here and then again have Flex justify Center and item Center because we will also add in a height property and for that we need a flex property so 4 over 6 will be the height that we want and you can change it of course as you can see now lastly we need to add some classes to the image itself so we say object cover it will span full height and a full width of our parent container which is this div up here and now it's time to create the actual logic because if we click the buttons nothing happens yet so up here let's define the JavaScript logic so right now you can see that we just showed this first slide so the index 0 but we want this to be dynamic so we create a state which is called slide index and then we also set slide index and equals use State once you hit enter then it will automatically import you state up here and in the beginning this should be zero so now down here what we can do is we can switch this 0 by our slide index variable and now you can see it's still the same image because up here we said that the index is zero if we change this to one you can see the other image two three and that's basically the logic that we want to implement with our JavaScript and the way that we do that is by creating another state variable which is our active slide so we always want to just show one slide and that is our active slide again we use the use statehook and we will pass in our images with the current slide index so it will always just take one image which has the slide index that we have here so right now it's zero so now we can change the source now image we don't need images and then specify the slide index but we'll just take the active slide now how do we want to change those well with these two buttons down here so what we have to do is we have to specify a function and then call it once we click on that button so we add in an on click Handler and we specify an on click Handler and we pass in an error function so every time that we click this button on the left we want to call a set slider function and we want to change the index number by one and here's the opposite so we have on click is an error function which we call and then we also want to call our set slider function but instead of decreasing one we want to add one and that means we need to Define our function up here so set slider as a function and its slider function takes them a certain number so now let's just see how this works so we have a certain number which we will log to the console as well as our slide index so now when we press the button here you can see that the number that we pass in is -1 and the index up here is currently zero and the same is true for the other one so the number that we pass in is one and the index is zero so now all we have to do is implement the logic that looks for the current slide index and then the number that we pass in now we just Define a variable called new number and we say slide index plus our number and then we want to set the slide index to the new number and now we can see that once I press it the index changes and here we have already our first Edge case that we need to take care of because once our number is -1 and the index is one well we can't take the index of minus one and minus two in mind three and so on because it will just keep on going that way so we want to set our slide index back to the last item of the images array anyway that we do that is by saying if our slide index is currently zero and the number equals minus one and we don't want to make the slide index more negative but instead we want to set our slide index to the length of our images array which in this case is 5 minus one because the index always starts at zero and if the length of our images is 5 as it is right now and we want to get the last image then we need an index of four so we say images of length is 5 minus four equals four and for that make sure that you have three equal signs up here now what is the other Edge case that we want to take care of so if our slide index equals images.length minus one so in our case if it's four and if we press this button on the right the number is one then we want to set a slide index back to zero so let's see if that works now if I click you can see that the index is exactly the way that we want it's never higher than 5 and never below zero and in the other direction that's true too the only problem is now that the images don't change and the way that we do that is by using the use effect hook so the way that the use effect Talk Works is we specify it down here and it takes them a callback function as well as an argument array that you can leave empty or in our case we want to pass something in so every time something changes inside of our app we want to call whatever function is inside of this use effect callback function in our case we want to listen to the slide index variable so every time slide index changes then whatever is in here should also run and what should happen well we want to set the active slider and we want to change it to our images array and we just want to pick the image that corresponds to the current slide index so now you can see if I press the button on the left or the button on the right our images change one last thing to add is that when we hover over the button we want to actually see a pointer as a cursor so we say hover and then we set the cursor to pointer now once we hover over it we can actually see that we can press this button and do the same down here and maybe you also want the buttons to appear as if they're floating on top of the images so just say shadow large and repeat the same down here and now it just has a nicer visual effect and that is how you create a very simple slider in react using tailwind and the cool thing about the slider is that well it's a separate component so you can basically reuse it in different parts of your application you can pass in other images and of course different props right now it's just a title but you could also pass in for instance the background color of the slider that you want or you could change the text color simply by passing in another prop up here and then referring to it down in your code if you did like this video please leave a like and a comment down below and also let me know what other topics would you be interested to cover in the future then I will make sure to make videos about that too thanks for watching and see you in the next video thank you

Channel: The Coding Loft

Views: 173

Keywords: Web development, Frontend development, React, Linux, Python, HTML, CSS, JavaScript, User Interface (UI), User Experience (UX), Responsive design, Frameworks, Version control, Progressive Web Apps (PWA), Single-page Applications (SPA), Full-stack development, RESTful APIs, Object-oriented programming (OOP), Functional programming, Docker, Git, Visual Studio Code, PyCharm, Linux command line., react, tailwind, react components, react slider, simple slider, react carousel, carousel

Id: EOtEts01D_s

Length: 19min 32sec (1172 seconds)

Published: Thu Apr 20 2023