How to create carousel slider in Tailwind css and React js ?

this is a quick demo in this video you are going to learn how to build this Carousel slider by using Tailwind CSS and react.js so you can see that it is rotating by clicking on the navigation buttons and also you can rotate or change the slider by clicking on these little circles so if you if you want to learn how to do this then please continue watching and let's learn hey there welcome back to IR stack today I am going to take you on step by step journey to create your own stunning Carousel slider using Tailwind CSS and rec.js whether you are a seasoned developer or just starting out by the end of this tutorial you will have a beautiful Carousel to add to your project so let's start the Tailwind CSS official document documentation here I will open the framework guides under the docs I need to find out the react open this one and let's run this command to create the project from scratch so I'm going to paste this command all right the project has been created now use CD to go into that project and open that project in your favorite editor I would be using vs code after the project has been opened in your browser we need to install the Tailwind so for that I am going to copy this command first and open the terminal in your vs code or in your editor or any of your terminals just press enter and wait for it after that we need to initialize that element CSS in our root directory so press enter and it would create a configuration file that is tailwind.config.js now in the next step we need to copy this tailwind.config.js file and replace it with this one after that we need to copy these three lines of code and open your open your index.css file I'm going to get rid of all of this code and I will just paste it here and at the end we just need to start the project so let's do that okay the project has been started now we will start building our Carousel so very first thing that we need to do is that go to the app.js and from here I will get rid of all of the default HTML that came by the default installation and now I will generate a new folder components it will contain all of my components and in this I am going to create a component called Carousel dot component.js okay now export it default function Carousel and we will be receiving the slides from this parameter and we need to return let's imagine we are receiving the an array of the slide so we can just iterate on the that array for that use slides dot map and return it with the image tag after that we need to go back to the app.js and here I will add my Carousel slider and we need to pass the slides now we have to define the slides variable here and here we need to provide the URLs of multiple images you can either use a local image or you can get from the internet I would get from internet so let's pick up some beautiful pictures from here and we will use them all right we have our images now so I will limit its width from here by adding the class name width should be I guess 64. or you can add 60 here and then I will add M Auto that means we need to bring it in the middle okay you can see that all of the images are here now I will go into the carousel slider wrap it in another div here I will add display Flex so that we could see them in vertical direction also I need to add some margin top or padding top okay here I will add class overflow hidden so in this way it will not it will not show any scroll and it will only show the visible area within the parent and now I also need to add the relative so that we could show the uh navigation icons on the top of it so next let's add the icons so for that I will be using the react icons Library I guess so first of all we need to install it so copy this command and run it here after it is installed you can simply use the import in this way so for example I want a an arrow icon that should be rounded in this way so I will just click on that that will give me the name I will just paste it here and as you can see it is BS so I have to add BS here as well and after that here I will add div button and here I will add the icon we need two buttons so I will add one here as well that would be in the left Direction I think we can have uh in this way as well okay now I need to import the left Circle icon as well now let's look at this you can see we have icons now I will add some styles to this parent div like absolute top zero H full and W full that will give it 100 width and then I want justify Center and item Center as well uh uh here you can also use justify between uh we also need to add the flex here okay now buttons are here let me try to add Z index actually we don't need Z index so the color is not good that's why it is not visible so I will add text white and let's see if that works okay great now I will add PX 10 and I can increase the text size as well all right so now we will add the transition here and easy now is out and the duration would be the 400 okay after that I will be creating a state to save the current slide number so let current and Set current and use State make sure to import the use state from the react here after I will Define the previous slide function and here we will check if current is equal to 0 then we need to move it back to the last slide so for that I will use Set current is equal to uh it should be slides dot length minus 1 that would give me the index of the last slide and otherwise I would Set current is equal to current minus 1. okay similarly we need to Define another function that is next slide so we want to see that if current is equal to the last slide then we will set the current slide equal to zero okay otherwise we will just keep adding on it all right now let's call uh these functions so for example here I want to call function previous slide similarly on this button I want to call a function next slide I will use JavaScript syntax here so I will wrap it in the backticks of string now here I will add this actually before that let me add translate X and this value would be dynamically generated by a JavaScript so here I would use that current multiplied by 100 we should use the minus so for example by default the current state is 0. so at the beginning 0 multiplied by 100 would become 0 and so that's mean we don't if a translation x is 0 that's mean we don't want any translation so it will stay there on the first slide and if you on the index number one of the slide then it will be 100 will be multiplied by 1 and it will translate in X Direction in minus 100 value and if it is on 2 index then it would be the value of the translate X would be minus 200. percent so yeah make sure make sure to add the percentage as well here so now let's try actually it is better to have this Dynamic thing in the Styles uh so I would create this and Translate all right you can see that now it is working perfectly fine so if you click on the next button it will show you the next image and if it reaches to the last slide then it will take you back to the first slide similarly if you are going forward and if you click on back it will take you to the backward slide and if you are on the first slide then it will take you to the last slide now we will add some navigation circles on the bottom so let's do that oops okay this is too large so I will decrease the size five five I guess and also I want some p y that is vertical padding and also I want flex and justify Center and GAP should be 10 I guess and width should be full okay and there should be as many circles as the number of images so for that I will wrap it in the map slide start map okay and we also need to add the key okay I will reduce the Gap further so maybe five is should be fine or maybe three okay so I think by default the color should be light gray but when it is active then we should show the color white so for that okay and so here I will add a condition that if I is equal to current slide then we need to add the BG White okay otherwise we need to add the gray color okay you can see that if you change the color then it changes the background color as well so yeah this is wrong direction so we need to use white here and gray here you can see that the indicators are also working perfectly fine all right now we need to make these navigation circles clickable as well so if you click on any of these circles it should be able to take us to that slide so for that uh I will add on click and here I will use the set first I need to call off give it a function and there I will call set current and we will give it a value of the index that we have from the map now let's try you can see whatever Circle I click it will take us to that slide and also I want to have a cursor pointer as well all right it is working perfectly fine all right your own Carousel slider built with the power of Tailwind CSS and react.js I hope you found this tutorial helpful if you enjoyed this video then don't forget to give it a thumbs up and if you have any questions or suggestions drop them in the comments below remember to subscribe and hit that notification Bell so you don't miss out on any future tutorials until next time keep coding and stay curious

Channel: AyyazTech

Views: 29,424

Keywords: CSS Styling, Carousel Slider, Frontend Development, JavaScript, React Components, Reactjs, Responsive Design, Styling Tutorial, Tailwind CSS, UI Design, Web Development, Web Development Tutorial, Website Carousel

Id: GguJODC2cvI

Length: 14min 38sec (878 seconds)

Published: Sat Aug 19 2023