Create Custom Slider With Vanilla JavaScript

[Music] so what's up everybody welcome to another video today we are going to create javascript custom slider so with benella javascript we are going to create this fully customizable slider you can customize it or you can add many content here as you want so in this video we are going to create this fully functional side so you can see that we have this next and previous button you can also customize the position for them so i just did it here so you can see that we have these buttons and we can click them we are going to the next slide and also we can come to the previous slide as you can see so it's really cool and also we have this dot indicator you can see that with our slides it's also moving the dots indicator you can see here in the bottom center as you can see and also we can click the dots so now you can see that i am clicking the dots it is also taking us to the active slide or active dot so let's say that i am clicking the first dot it's taking us to the side number one so that's it that's the fully functional slider and also let's come here to our mobile so you can see that in the mobile device it's also working perfectly fine so in this video we are going to create this so hope you will like it so no more talk let's dive into the code so today is the day 25 of our 30 days 30 submits challenge so for the day 25 we are going to create custom slider and if you are interested to check out this repo i will link it in the description here you can find all the interesting submits that i did in this 30 days 30 submits challenge and no more talk let's come here in our code here so you can see that that's the html css and javascript and all are empty and i also have some images here for our slider so let's code our slider here so first of all let's get a boilerplate in our html so in the body let's have a section inside the section i will have a div with a class of slider so now let's get our first slides here so d with a class of slide and also you'll have a class slide one so this is the first slide so let's also have some content you can have any kind of content but for now i will have only a h1 so let's say that hello slide one so this is our first slide so let's duplicate it so this will be the second and this will be the third and this will be the fourth one and also let's change the content so second third and fourth and if i save and refresh as you can see that this is my slides content and looking good for now so before we go further i wanna say that this slider will work when you have slides more than two so if you have two slide only it will not work okay so you need to have more than two when you have one slide you don't need actually a slider okay so it can be a normal header so i need to mention that so this is how i coded when you need more than two slides for this slider work so let's actually come to our html css here so first of all in our css we need to link the css first of all here so link and css so this will link it and in our css first of all let's remove all the unexpected gaps so padding will be zero and margin will be zero and also let's say that box sizing will be the border box and as you can see that we don't have any kind of extra gap anymore so after that let's come here in our html let's say that the font size will be monsterart so montserrat so i already installed this monster font in my pc so that's why i don't need to import it so also let's have a sensor if as a fallback so not font size this will be the font family so monstart and sans serif here as a fallback sensory and also let's have the font size so the font size will be 20 pixel and if i save as you can see that the font is already applied and after that let's come to the section here so in the section so the height will be 100 vh and also the width will be 100 percent and that's it so we are going to make a full page or full window slider so you will see it in a moment so let's come to the slider here so slider and here let's also say that the height and width will be the hundred percent of our window and lastly what i need actually i need to apply the individual background image for the slider so let's actually do it so i just can say that slider one or slide one actually slide one background image so url and here i have some images for the slider so this one will be the first slide and let's do it for all the slides so this will be the second and the image will be the second image and also third third image and fourth fourth image if i save now you can see that the background image is already applied as you can see here so after that let's come here in our slide actual slide and let's actually say that the height will be the hundred percent and the width will be also the hundred percent and if i do that as you can see that the height and width is now hundred percent for each of the slide and after that let's also say that the display will be flex so this is for our contents i want to display this content in the center so that's why i am just displaying is as a flexbox so align items will be center and justify content center now you can see that the content is now in center so it's looking good and also i just need to change the color for our font so let's say that the color i want is the white color so you can see that when i am using this white color i don't have enough contrast in many slides so for that i just can do a overlay for our slides so let's have the overlay here in our slide so in here let's say that slide after so i am just creating a sort of elements here so let's say that the content will be empty and the position is absolute so when you have the child position absolute so make sure that the parent which is the slide have the position of relative or absolute so for this case i will use absolute so if i give it absolute you can see that we have now one in the top and after that we have this one and beneath that we have the other slides so when i am giving the position of this slide absolute what it will do actually so as you can see that now we have the slide four in the top and under that slide we have three under that one we have four uh two and one so now everything is top of each other so it's looking fine for now and after that let's also say that the sword elements will have a height and width also so also let's say that the height will be 100 percent of our section or the slide and the width will be also 100 percent and also the top zero and the left zero for our position so lastly we just need a background color so that we can see it so let's have a black overlay so this is a type error as you can see that it is saying that content it should be content actually so content so that's my fault so now you can see that that's our overlay and we can't see anything so let's actually drop the opacity for the overlay here so as you can see that now we can see it but you can see that the content which is the heading it is under the overlay so we need to bring it forward and to that i just can use some that index so let's say that the that index will be -1 and if i save as you can see that now this whole overlay is under the full slide so we don't want that so for that i just can say something like here let's say that the that index for our slide will be also minus one now you can see that the content is actually in the top and after that we have the overlay and after the overlay we have our image which is the background image as you can see so it's looking good now we have enough contrast for our this h4 or this heading or the content so looking fine and lastly let's also have a background size will be cover for our this background image so perfect for now and if i inspect that so that's the slider and inside the slider we have our h1 and also all the other things so now you can see that we used position absolute in the slide so let's also make sure that the parent of this slide which is the section ultimately have the position relative and also overflow let's hide the overflow for the x because we don't want any kind of horizontal scroller in this slider so hidden now you can see that it's looking perfect and let's also transform it so in the slide let's say that transform translate so we are going to transform it in the x 100 percent so it will go totally out of the window so we will not see it so if i save as you can see that we can't see it but what i can do actually i can add a class one of this slide so let's add it to the first one which is the our slide one so the class will be the active class so if i save it and let's also come here so let's say that whenever we will have these active class in any of our slide so what i will do actually so active and here let's say that what i wanna do actually i wanna transform it so let's change the transform from 100 to the zero now you can see that the slide one is showing and all the other slide is actually out of the window only the slides which have the active class now is showing in the window so if i change the section class from one to two i should see the slide number two instead of the one so we can change this active class and what it will do actually it will make the slide visible in the window which have the active class so let's keep it in the slide number one so that's looking fine and here in our slide we don't need this that index for now so i will show you when we need it so you can see that it's working and also we have our all the pointer event as you can see and let's come here to show you more as you can see that in the slider we have in the section actually we have this overflow x so if i remove that style from our css as you can see that we have these horizontal scroll bar and if i scroll so this is the slide number one which have the active class and all the other slide is out on the window in this place as you can see so only the slide which will have these active class will come here and we can see it and all the other slide will remain here and we can't see them because we have the overflow x hidden so if i enable it now we can't see them only the slide we have the active class so that we can only see and that's it actually we don't need anything else for now actually one more thing we need which is our buttons so we need our buttons to navigate the slides so for that after the slider here the let's also have a div with a class of buttons and here buttons we will have our two buttons so first one will be the next and second one will be the previous and for the buttons we are going to use icons and for the icons we are going to use iron icons you can use any kind of icon library so here let's search for next or i can say that right and i will use this one just copy the tag and paste it here inside of our next div and also let's have the left one and copy that copy the tag and paste it inside the previous div and after that let's also grab the cdn from the usage and grab the cdn here and paste it before the closing body tag and that's it so now we should see our icons so here you can see that when i'm scrolling we have this extra gap so this is what or this is higher the icons is now so if i inspect it you can see that that's the icons so we need to position it so our style the buttons so let's also style it here so let's say that buttons style and here let's say that the buttons with a class of buttons actually so here let's say that the position will be the absolute and also let's have the that index five so it will be top of all of our site and also let's say that the bottom will be zero and also the right will be zero so this will be basically in this corner because i want to position them here so that's why i just did the bottom zero and the right zero and the height will be the auto and after that let's also have the color which will be the black and display it as a flux and flex direction so flags direction will be column and after that the width will be auto and the font size i want to have is font size about 50 pixels so if i save that we should see my icons here as you can see that those are the black icons so we don't have enough contrast so let's also have a background so that we can have contrast and if you can see that the flex direction is column so we don't want the column actually it should be the row and if i give it to that's now what we have as you can see that the icons is now in a row so also let's come here inside the buttons we have the individual div for our individual button so here let's say that the cursor will be the cursor will be the pointer and also let's say that the pointer event will be all for now and also let's have the padding so the padding will be 15 pixel and let's have the background color so i will have a white color so now you can see that we have this wet color and if you want what you can do you can drop the opacity a little bit so that it can be something like transparent semi-transparent you can see that and if you want you can drop it more so something like that or something like that so it's looking good and finally what i need actually if you consider the position for our next and the previous button is not perfectly in place so this is the next and it should be in the right side so for that i can reverse the position for our the icons by this flex direction reverse so we can say something like flex direction row reverse so it will do the work as you can see that now our these icons is perfectly positioned and after that let's also say that i wanna have a overlay sorry hover effect so for the hover effect so i just can say that whenever i will hover the button div so button div if i hover that i want to change the background color to the white and it's not working okay sorry for my so it it is not a class so it is only a html div so we don't need the hover effect sorry we don't need the dot for our this tip so now you can see that whenever i will hover we have this nice hover effect and it's looking good for now and that's it for our html and css let's come to our javascript so before that here let's also add the javascript script source and in the source main.js so first of all in our javascript what i need actually i need to grab all the slides so constant slides equals to so i wanna make it an array so add a dot from and here we just can select it so whenever we will select in regular way with the document.queryselectorall what it will give us is a note list so we don't want a node list we want it as a array so for that i can use this array.form and inside that we just can grab the document so document.queryselector and all now what it will do actually first of all let's also specify the slide class here so now what it will do actually this part will grab the all slides and make it as a note list and return to us so after that what we have is we have this array.from which will convert the node list to the array so high so ultimately what we have is we have an array of all of our the slides inside this constant so after that let's also grab the whole slider so slider and let's say that document dot query selector and this is not all we just need to select the slider so we have only one slider so that's why we don't need that all and after that let's also have the buttons here so we have multiple buttons so for that you guess it we need actually this query selector all because we have multiple so buttons and under the buttons we have this div and now we just need the function for our these buttons and all the slider functionality so let's have a function here and name it something like get pre or let's say that get next and please so this will give us the next slide and the previous slide whenever we will call this function so in this function first of all we will get the active slide so let's say that active slide equals so document dot query selector and we can just grab the active slide by saying that slide with a class of active and now it will get the active slide and after that let's also say that the active index for the slide active index so we want to have the index for this active slide from this slide serum so i just can say that slides dot index off i just can't pass the active slide so it will give us the index for our detective site which we can get by this array so sorry in this variable so let's also console.log it so that i can show you so console.log the active index and let's also call the get next and previous function now if i come here in the console log now you can see that we have an error active index before initialization okay here sorry this will be the active slide actually so because i wanna have the position of our active slide or the index of our active slide okay so if i save now we should get the index which is the zero because we have the active class in our this first slide so if i move it so from 1 to let's say that i want to move it to the third one so now we should see the two means the third position of our this array so it's looking perfect and we are now getting these active index perfectly so now what i need actually i need to have two let variable so first one will be the next and second one will be the previous so now what i need actually i need to get the next slide and the previous slide so for that i can do something like the next slide will be slides so we just can have the next slide by adding a one after the current slide so what i mean so if i open the inspect here so now for now as you can see that the active class is the third one so the next slide will be the four one which means the index of our this third one plus one which will ultimately give us the next slide so i just can say that active index plus one which will give us the next slide and similarly we can do it for our previous slide which will be the active slide minus one and if i console log those console.log here and say that next now you can see that that's our next slide and that's our previous slide so in the next as you can see that we have the slide four and the previous slide is the slide number two so if i come to the elements here and you can see that we have now current slide or active slide is the slide number three so you can easily see that the previous slide is the slide number two and the next slide is the slide number four which is perfect according to our this console log so what i need actually whenever we have the active class in our the last slide so let's say that if our deceptive class is in this last slide so let's see what it will give us so in our console log if i come here now you can see that the next slide is undefined and the previous slide is slide number three so you can see that the active slide is now slide number four which is the last slide of our slider and if i can see that this is the previous slide which is slide number three according to our console log the previous slide is the slide number three which is okay but we don't have any kind of next slide because you can see that this is the last slide of our slider so that's why you don't have any kind of next slide here so for this case what i need actually i need to have the next slide will be this first slide of our slider so for that what i can do actually i can check it if the active index is equals the slider slides dot length -1 means if the active index or the current slide is actually the last slide means what we have now what i need actually i need to change the next slide so for now we are calculating the next slide by adding a one so if we have the active slide in the last slide of our slider what i need actually i need to manually say that the next slide will be the slides first one so it will give us the first slide of our slider which is the slide number one and else we will calculate it as we did regularly here by adding one so let's console log it and maybe it should fix it now you can see that the next slide is the slide number one now and the previous is the slide number three which is okay so this is the slide number three which is the previous one and the next slide is the slide number one which is perfect and what if we move these active class from four to one so if i do that as you can see that we have now active class in the slide number one and if i come here in the console log the next slide will be the slide number two which is perfect okay but what is the previous slide there is no previous slide for our slide number one as you can see that there is no previous slide so for this case what i need actually i need to make sure that i need to manually say that the previous slide will be the slide number four which is the last slide of our slider so let's also do that manually here so let's say that if our active index is equals the first slide means i can say something like 0 i can say the previous slide will be the last slide of our slider we can do it easily i can say something like slides dot length minus one which will ultimately give us the last slide of our slider and else we will calculate it as we did regularly by adding one actually subtracting one not adding one so perfect and now it should be perfect for any kind of case and now we have our next slide and the previous slide and let's also return it here so let's say that return and we will return the next and also the previous perfect now whenever we will call this function it will give us the next slide and the previous slide and after that let's also position all of our slides here so let's also have a function and which will have a name get position now first of all here i just need the active index and active slider so let's copy this one from our previous function and paste it here so what we have here is we have the active side and the active index for the slide and after that let's also have the next slide and the previous slide by calling this function so we can do it easily so let's say that constant next and the previous from our this function which name is done get next and previous slide so get next and previously so now what we have we have active slide we have next slide and we have the previous slide and let's loop it here so now we can loop the slides so slides dot for each and here let's say that we will loop it for each individual slide and also we will have the index and here let's have a and after that let's also say that if our index is equals to active index means if the slide is the active slide what i want to do actually i want to say something like slide dot style dot transform so transform and i wanna transform it translate x zero so basically what i am doing is why number we have the active index or the active slide actually we are transforming it into the zero so transform test latex zero actually that's what we did here so if i come here where it is whenever we have this active class in our slide we will transform it into the translate x 0 as you can see so this is the similar thing and else what i wanna do so else if if it is the previous slide slide is equals to previous what i wanna do i wanna transform it into the translate x minus hundred percent so copy this one and paste it here and instead of this zero i just can say that minus hundred percent and after that let's also do it for our next one so else if if the slide equals the next slide i wanna also position it to the positive hundred percent so if i give it or remove this minus now what it will do actually it will go to the each of the slide and see if it is the current slide of the or the active slide if it is active slide it will transform it into the zero means we can see it and after that if it is the previous slide what it will do is it will translate it minus hundred percent means it will come here and if it is the next slide what it will do actually it will transform it into the positive 100 so it means it will go to the into the right side of our window into the out of the window so we can see that only the one which have the active or the active index or the active slide that's the one which we are going to see in the window so perfect after that let's also say that else if we have any other slide we wanna say that the style for that will be transform translate and same hundred percent so perfect so that's it for our this function which is the get position and now if i open the inspect and if i run this function actually so instead of this previous function let's run the get position function now we should see all the position as you can see that the active one have the translate axis zero the next one have the positive hundred percent and the previous one according to our logic the previous one will be the slide number four which is the last slide of our slider have the minus hundred percent transform so perfect it's perfectly positioned and after that let's also have this functionality for our buttons so for that i need some even listener here so let's say that buttons dot for each button so button i wanna have some even listener here so let's say that button dot add even listener and whenever i will click one of them but i if i click them what i wanna do actually i wanna run function according to the button so now what i wanna do i wanna run a function depends on which button i clicked so if i click this previous button as you can see i wanna run a get previous slide function or if i click this next button i wanna run another different function which will be something similar to something like get next slide so to do that i can say that if our buttons dot class list dot contains so if it contains so if it contains next means we are clicking the next button so now what i can do actually i can say so here i can say something like get next slide so whenever we will click these next buttons means the button class list contains the next class it will call this function else what can be happen is if button class list dot contains the previous one means if we click this previous button i wanna run another function which is the get previous slide so that's it so let's also create those functions so first function is the get next slide and here let's say that console log getting next slide and also let's say that function and get previous slide actually the p will be in capital and here let's also console log it getting previous slide and let's come here in our console log i think now it should work so if i click the next one getting the next slide and if i click the previous one getting the previous slide means it is working perfectly so now we can do our work inside this function so first of all let's get the next slide so here let's say that first of all what i need i need a actually i need those things that i did earlier here the active slide and also the active index so copy that and paste it here now we have our active slide and also we have our active index and after that let's also have the constant and let's say the next sorry so we will have the next slide and also the previous slide from our this get next and previous slide function so let's say that get next and previous so it will give us the next and previous slide so now whenever i'll click this next button what i wanna do actually i wanna change or i wanna move this slide so the slide which we have now is the active slide i wanna move it to transform translate x zero to transform translate x minus hundred percent means this will go this direction means in the left side and the next slide which have now the transform translate x positive hundred percent means it is now in the right side i wanna have it into the window means i wanna transform translate is into zero percent or the zero pixel so to do that first of all let's say that i wanna move the current slide which is this one so let's remove it so i can say that active slide or the current flight you can name it anything so active slide dot it's actually name it current so that you can easily understand it so this is the current slide which we have now so i can say something like current dot style dot transform and i wanna translate it and zero sorry not zero i wanna translate in minus hundred percent means it will go to the left side out of the window so if i save it and do that so it's not working so let's see in our console log yes there is a error here so the active slide okay we don't want this active index so let's remove it so now it will work so if i whenever i will click the next one now you can see that we don't have any kind of slide means the slide which is the current slide we just remove it for we just move it to the positive or sorry negative 100 percent means it is now in right sorry in the left side out of the window means it is now here we can't see it so also in and also what i need actually i need to move the next slide next dota style dot transform to the window means i wanna transform it translate x 0 means it will come to the window in this time so now what i'm doing i'm removing the current slide and getting our next light so if i save it and click the next as you can see that now we having this next slide means the current sorry in the slide number two and it is working perfectly as you can see that but there is a problem if you can see that in our now you can see that we have these active class in our slide number one but whenever i'll click to the next button this active class should move from the slide number one to the slide number two so let's do it so we can do it easily i can say something like the current slide current dot plus list dot remove i wanna remove it from the current slide which is the active class and i wanna add it to our next slide next dot active yeah sorry class list dot add and i wanna add the active class and if i save it and let's also test it here so as you can see that now the next slide or the active class is just moving perfectly so also what i need actually i need to have animation or i can say something like transition here so for now we don't have any kind of transition it's just moving so fast so to have the transition we will add a class to our next slide and also the current slide so for that i can say something like next slide or i can say something like current class list dot add top and also i wanna add it to the next so now i'm doing is i am adding a class to our current and the next slide so if i save it and open my inspect i should see this top class now you can see that we have this top class in our these slides so now what i wanna do actually i wanna animate them or i wanna add transition so if i have any kind of top class in our slide i will give it a transition which will be the 0.3 second is only for the transform so transform so also what i need actually i need to give it a set index of 5 and whenever you give this at index of 5 now we can do our that index -1 in our slides means what it will do actually it will make that index 5 or you can do it something like that in x3 we don't need 5 actually because we just gave the 5 to the buttons i believe yeah we gave the five to the buttons so we can do something like three so now we have our buttons in the top layer and after that we have our active slides means the slides which he is working on means the current slide and the next slide or the previous line which will have the top class and there will be in the next layer and after this layer we will have all of our sliders so for that i just can say slide slide that index minus one so now you can see that it's working perfectly now we have three layer first layer for our buttons so after this layer we have our current slides means our the slides and the next side the previous slide so this is the three working side whenever we are in any kind of situation so these three slides means the current next and the previous will have the that index three and all the other slides will have the set index minus one so perfect now we should see some transition so if i go to the next as you can see that our transition is working but there is a problem if i come here the transition is working by this top class if you can see that but these top class is still there so it will do some this kind of thing as you can see that so we don't want that so we need to remove these top class whenever the transition is end so to remove it i can do something like in our these get position after the else here what i can do i can say something like next or the slide dot class list or actually let's add a even listener and i can say if our transition and we wanna remove this class which is the top class so i can say slide dot class list dot remove which is the top class and now if i come here and now i should see it working so you can see that whenever the transition is end we just removed the top class from our these slides so finally what i need actually when we did or we finished all the things for our next slide finally we just need to position them so get position so we just can call the function which will which is the get position so it will get the position and fix all the position after we just clicked to the next button so perfect so let's also do it for our previous slide so it will be kind of same thing that we did in the next slide so we can do something like just copy this and paste it here what i am having now is that we have a current slide or the active slide and also we have the next and previous first of all we just need to add a class for our current so current dot class list dot at so this is the class for our transition or animation and also we wanna add the transition to the previous one so you can see that in our next slide we just added this top class to the next slide but in this case we want to add it to the previous one because we are getting the previous slide here so previous slide dot class list dot add and we can add the top class here and finally what i need actually i need to move them and also i want to move the active class so first of all let's remove the active class from the current one so current don't class list dot i just can say remove and i wanna remove the active one so it will remove the active class and what i need also i wanna move this current slide so current dot style dot transform so how i wanna transform it so you can see that we are just clicking this previous button means we need to move this slide to the right direction means we need to translate it x and we need to make it positive hundred percent so now you can see that in our previous slide function we just did it into the minus one because we are getting the next but we are getting now previous slide so that's why we just need to move it into the opposite direction which is the right direction means this way and that's it and after that let's also add our active class now you can see that in the previous line we just removed the active class from the current one now we just need to add it to the previous one so previous slide dot class list dot add which will be the active class and we also need to move it so it will be something like previous dot style dot transform and we wanna translate it x and zero so now it should work perfectly now you can see that now the previous button is also working and finally we just need to position everything so get position so perfect as you can see there if i open my inspect here everything is working perfect so now if you can see that whenever i will click this next button or the previous button too fast now you can see that there is something unexpected happening so to prevent this what i can do actually in our function here let's say that if our current one still contains the class list dot contains if it is still have the top class means we are actually clicking too fast so for that case i wanna just return it i don't wanna do anything so now it should fix it so whenever i'll click this next button too fast now you can see that we don't have these unexpected thing anymore so let's also do it for our previous one so we can do it here so if our current dot class list dot contains top class means we need to return so that's it now it will be perfectly fine as you can see so finally what i need actually i need to activate my dot for our this slider so let's add this dot navigation so here after the buttons in our html let's have a div with a class of dots and inside here we will dynamically generate all the dots depends on how many slides we have so for that in our javascript first of all come here and say that let's have a comments here so let's say that dots function so here let's say that slides so slides dot for each so we are actually looping through the slides all the sides so we can call them as a slide and here for each slide we will create a dot so let's say that constant dot equals to so document dot query selector so we will have a div or we'll create a div here so document dot create element actually so we will create a div for each of our dot and also we will add a class list to this div so dot dot class list dot add which will be the dot class and after that we will append this dot into our these dots div here so we can come here and grab the dots here so dot step i can just say that dot e l means dot element so document dot query selector and i just can say dot with a dot so dot with the dot that's funny so save it now it sorry it will be the dots actually because you can see that we have this dots not dot so perfect it will grab this and we have now access by this dot element so we can append this so i can say something like dot element dot append child we wanna append the dot here so and that's it so now what it will do actually for each slide here it will create a dot and append it to our dot div so if i inspect our dot div here so you can see that now we have this four dot div by created dynamically by our javascript actually so we have four slides and for four slides we have these four dots so let's also have some style for those dots here and here let's say that dots and say that the that index i wanna have it in the first layer so let's say that's that index in the five and the position will be the absolute because i wanna position it in the slides so bottom zero and also let's say that left will be fifty percent because i wanna position it so let me show you here so i wanna position it in the center of our these slides so that's why in the bottom zero left fifty percent and to make it perfect left fifty percent or in the center fifty percent i can do something like transform translate x minus 50 now it will be perfectly in the center so after that i can say for our individual dot the display will be inline block and the height will be 10 pixel and the width will be also the 10 pixel and the width will be 10 pixel after that background color will be let me copy the color it will be something white with a low opacity so if i save as you can see that that's the dots we have here so let's also make some border areas for them so i want to make them circle so whatever it is 50 will work and also let's have margin so that we can separate them from each other so 10 pixel will work now you can see that we have these dots here so perfect and now what i wanna do i wanna have a cursor here so because i wanna click them so cursor will be the pointer so as you can see that now we can click them so we will add the click functionality now first of all let's come here in our javascript so let's say that get the active dot first of all after that we will add the click functionality so what is the active dot as you can see that the active slide is the slide number one so we just need to make the active dot according to our slide so for that i can say something like create a function so let's add a function active dot so inside this function first of all let's say that we just need to have all the dots so constant all dots so document dodge query selector and can get the dots here so it's in the dots and after that we just need to select individual dot so it will give us all the dots as you can see here so after that what i wanna do actually i wanna get the active slide and also the active index so we just can copy these two lines which we did earlier here so this is the same thing we are just getting the active slide and also the active index so now this according to this active slide and active index we can just have a active dot now i can say something like all dots from the all dots i wanna grab the active index one so it will give us the active dot so for the specify or we just can add some style so for that we can add a class for our this active dot so class list dot active sorry class list dot add which is the active one and save it and now if i come here now you can see that it's not still working because we need to call this function active dot here and also we need to we have an error here so class list of undefined okay as you can see that we are getting multiple dots but we are just saying that query selector we need to make sure that it is quality all because we have multiple dots now it should work now if i come here and in the dots we have our active dots which is the first one so perfect it is working perfectly so let's also have our style for our active dot so let's say that dots with a class of active sorry not dots inside the dots we have our dot with a class of active i can say that background color i wanna have it pure white and also i wanna change the width for it so it will be 40 pixel and now you can see that so we have a problem we need to make sure that the border radius above 10 pixel will work so it's looking perfect for now and also let's have a transition so that we have the animation so let's say that it will be 0.3 second is and only for the width so perfect so now whenever i will click one of these buttons means next button or the previous button i wanna change this active dot so for that in our next slide get next slide after the get position i can say something like get active what was the name it is only the active slide sorry active dot so here active dot or we can name it get active dot actually so it will be easy for us so get active dot so now as you can see that it should be okay for all the other things so however we'll get next button as you can see that we are adding the next dot active dot as you can see so after that now the next active dot is the third one and after that the next active dot is the fourth one so it is working perfectly but what i want to do actually i also want to remove the active class from the pbs dot so for that in our get active dot after all the constant what i want to do i wanna have a loop here so let's say that all dots for each dot i wanna do something like dot dot class list dot remove i wanna remove the active class from it and sorry and after removing these active class from all the other dots i wanna add it to the active dot here so first of all we are removing and after that we are adding to our active class to the active dot so perfect and save it now you can see that whenever i click the next button it is removed from the previous one add it to the next one perfect let's also do it for our previous button so in here where is the previous slide yeah that's the previous slide after the get position let's say that get active dot perfect now you can see that it's doing its job and the next thing that i want to do actually i want to activate the kick functionality whenever i'll click one of the dot i wanna have the slide according to the clicked dot so let's say that i wanna click the first dot i wanna have the first slide in our window so to do that i wanna add another function let's say that so for that let's also have another function here so let's say that function which will be the functional dot so functional sorry so here we will functionalize those dot so let's say that first of all we want to have the all the dots so let's say that constant all dots and here let's say that document dot query selector and also i wanna have the dots from the dots i wanna have individual all the dot so it should be the query selector all and after that what i wanna do i wanna have a loop here so all dots dot for each dot i wanna have a loop so in the each dot i wanna have a even listener dot dot add even listener so whenever i will click one of them i wanna do something so you can have and here what i need actually i need to call a function which is the get dot slide so what i am doing is whenever i will click one of these dots i will call this function which is the get dot slide and inside this i wanna pass something so as you can see that in our forage we also have access for our index so i just can do it here so we now we have the index and now we can pass this index and according to the index i will get the slide so here let's say that let's create the function that's we named here so function get dot slide and here inside that we have a access of our index so now what i can do i can say something like slide dot for each so we are looping through the slides so for each slide i wanna remove the active class from the slide so slide dot class list dot remove active so i want to remove the active class from the slide and after that i wanna add the active slide only to the index slide so i just can do it very easily i can say something like slide index light dot class list dot add and i wanna say that active so now what it will do it will remove the active class from the all of our slide and it will add it to the according to the clicked dot means if i click the second dot the index is that second one and it will add it this active class to this second slide so perfect and after that i wanna do the all the other things means the get position and also i wanna have the get active class sorry get active dot actually and finally that's it actually so if i save it now if i click one of them so it's not doing i think i have some error here so actually we need to call this function so get dot slide so we will call this function not this function sorry functional dot so that's the function actually let's say the dots not dot so it will make sense because there are multiple dots so so let's call this here so what i want to do actually i want to call this dots function so i can call it here so let's say that functional dots so now it should work now you can see that we are getting the third slide and also as you can see that the third dot is already active perfect also if i come here and i should see the active class moving so you know it didn't add up number two now the active class in the number four and all the other things means the position as you can see that that's the previous one that's the next one the position is also perfect so here in our active so let's also come here in our css when we have this active class let's also say that that index will be the three so now it is working perfect so that's it as you can see and finally what i need actually i need to make it a auto loop so now you can see that in many slides you might saw there is a auto lock so to make it automatic loop i just can create a function so let's say that function and let's say that auto loop and here i can say that i wanna have a variable here so let's say that let timeout id so timeout id so here in our this function autoloop i can say that timeout id equals something like set timeout i wanna have this auto loop in every five seconds you can customize the number as you want so also let's have a function here so inside this function we will go to the next slide so in each five seconds so after the five second we will go to the next slide so i just can say that get next slide that's it that's what we need for our auto loop and finally we need to call it here so get sorry auto load only so if i save we need to wait five second now you can see that we are going to the next slide slide number two automatically so after the next slide you should know to go further because what i am doing is where is the function for our next slide so that's the function in our next slide so first of all what i need actually i need to call the timeout loop once again here so first of all so on in the end of our this function i just can say that auto loop so now it will work so one two three four five it should go to the next slide and also if i wait more five seconds it should go to the next slide so it's working and now what i need actually i need to clear this timeout so you can see that that's the timeout of our five seconds so whenever i click the next slide here first thing that i want to do actually i want to clear the timeout so the reason behind this if i come here as you can see that if i say one two and if i click this it will not actually start from the one or it will not actually wait from the five second it will keep going so we need to prevent that so for the first string in our next slide i wanna clear the timeout so clear timeout which is the timeout id so now what i am doing is whenever i click this next button i am just clearing the timeout id means it will not be able to load auto lock but in the end we are manually calling it so it will work perfectly fine so if i say that if i save it so 1 2 3 if i click it now it will again start from the one and wait for the five second and now it will go to the third second sorry third slide so that's the function id so as you can see now it will wait for the five second because we just cleared the timeout and also do it for our previous slides so this will be the same thing so clear timeout here and let's say that timeout id and in the end of the function we just need to get our auto loop here so perfect so it's doing perfect so i want to quickly mention here so i forgot to add something here so whenever i'll click as you can see that we are changing our slides according to the click so whenever i'll click where is the function so that's the get dot slide so remember i'll click here and i also need to clear our timeout here so clear timeout clear time out i'm not id so that's the thing i forgot to add so i'm sorry for that so now you can see that high number i'll click now it will restart the timer for five second in each click so now whenever i click it will start from the zero to the five and next it will go to the auto loop oh sorry now we have that 10 second so we need to wait 10 seconds oh my god is it working or not i think it is not working but we need to also say that auto loop because we just clear the auto loop so after that we just need to manually start it so now whenever i'll click it will start from the zero and here let's also say that two seconds so here if i come here one two let's go to the third slide so that's it as you can see so that's it so that's the quick fix for it so that's it so now you can see that we just have fully functional slides here no errors i think yeah that's fine and you can see that so i wanna mention something here so you can see that in this slider we must have more than two slides actually because you can see that in our get previous and next slide we need actually the one active slide and one next slide and one previous slide to work this slider so there must be more than two slides if you have one slide you don't even need a slider and if you have two slides it will not work so i'm sorry for that maybe you can add some functionality to this slider to work with those two slides but for now it will not work with the two slides but whenever you have more than two slides means three slides or four slides no matter how much more but if you have more than two slides it will work perfectly fine okay so make sure that you have more than two slides okay so that's it and let's also make it mobile responsive so in our mobile device it is looking good for now actually let's also move these buttons or these dots here so in our style let's come here in the media query so media max width and let's say that 768 pixel and inside here let's say that the dots position i want to change the position i want to change it into the left zero so if i give it as you can see that we had this transform so that's why it is actually going 50 percent left out of the window as you can see so we just can say it something like transform translate x minus r0 you can see that now you can see that the position of this dot is in the left side so i think that's it for our this video if you want you can customize it in your way you can do so many things so that's it for this video if you want to have something like let me show you content here you can also add the content so now you can see that that's another slide which i made so here we have some content so basically what i am having is if i open the inspect for this one so you can see that there's the slide one inside the slide one we have a div with a class of content and instead that we have our pregraph and all the other things so you can see that here is the pregraph and all other things so you can customize it in your way so there is nothing to worry about that so this slide will will work as you want okay so we have full functional slide as you can see so you can add so that's it as you can see that we have our perfect slider here we have all functional thing as you can see we have next and previous so you can customize it so that's up to you and if you do please let me know how you customize these slides in the our facebook community group you can join it i will link it in the description of the video you can come to our facebook community group so that's it for this video i hope you learned something and if you did please give it a thumbs up and don't forget to subscribe the channel because i make this kind of website related web development related video so hope you will also like those video those upcoming videos to see upcoming videos please like and subscribe the channel so that's it for this video and my name is arfan and i will see you in the next video till then bye bye kuda hafez you

Channel: WEB CIFAR

Views: 5,532

Keywords: image carousel javascript, how to create an image carousel, javascript, bootstrap alternative, vanilla javascript, How To Create An Image Carousel In HTML, image slider tutorial, javascript image slider, custom slider, js slider, js full page slider, carousel, carousel slider, slider, dots indicator in image slider, circular indicators, slide, android carousel library, animate slider, website carousel, custom carousel, js, js carousel, web cifar, shaif arfan, full page slider

Id: V9TCxMMpGhI

Length: 76min 58sec (4618 seconds)

Published: Tue Sep 01 2020