Building an image slider from scratch using VUEJS and Tailwind | Manoj Singh Negi | Recraft Relic

hey guys welcome to the aircraft free channel and i hope you are doing well so today we are back i'm back with the you know another live coding session and uh it's again you know based on vue.js and what we are going to today is we are going to build a image slider from scratch so let's get started the whole idea is to basically you know create a image slider component which basically will have a next and previous button and uh you can click on those next and previous button to move between slide and the slide will animate from you know uh it will be like a fading animation you know from left to right right uh the library that i'm used uh obviously i'm we are using vue.js and addition to that i'm using animate.css css for the animations and i'm using tailwind for you know all the other styling right uh as you can see i already have a you know sample project here and uh you know here is the application if we go to the index.html remove this uh you can see i have two uh you know uh cdn uh libraries here so first is animated season and the other is tailwind system this is not the you know best way to include these library into your project uh there are other ways like you can install these in your uh you know project using npm but you know for the sake of the tutorial i'm just going to use them like that i'll put this uh links in the description and you can also go to cdnjs.com to if you want to like you know get a cdn hosted uh version of any library all right so let's get started so this is our uh you know the main app and uh let's remove this in extra styling we don't need that um so what i want to do is i want to center my image slider into like you know in the center so i'm just going to go here and do a div now i'm going to use some tailwind classes firstly i'm auto to give it a margin order from both side and then width to maybe one by two to give it like the fifty percent uh width of the report uh let's extend it a bit um okay now so we have uh this now um let's create our image slider component so let's uh go here image slider and just go here image slider image slider image slider and um just rename this file to image slider as well now go to image slider and change the component name to image slider right now uh what we have to do basically is um you know we'll start by creating our you know uh the master div which is uh which is already there like the parent container that this is the top most container and then uh let's give it some margin from the top class am top 10 uh so if in case you're wondering these all are tailwind classes you can go to tailwind uh css.com or television.com to you know just go through the documentation of this right and i also will link the documentation in the description so you guys can go and have a look there as well so now we have the margin here now we'll start by creating our day which will contain our slider content so there will be two main day the first will be for the content like the slides and the second will be the button container so you know basically the you know uh the next and previous button will be in that container so this will be a slider container uh we'll just make it relative uh the reason i'm giving it relative because the children's will be absolute because all the slide will like sit top on uh of each other and they will slide so i'm just going to give it relative uh slider content right and uh now let's uh create our like slides so for creating slides what i want to do is i want to pass a prop which will contain all the slides like images for all the slides which can be passed you know to this component through its parent uh that makes sense because you know we don't want the static slides uh we want it to be like customizable according to the how the parent want to use this component so i'm just going to define a prop and i'm just going to say slides and make it a array right so now we have an array you know of the slides and then what i'm going to say is i'll go inside this and i'm going to say dev right v4 slide in slides okay we we bind now we have to provide a key so basically slide will be our image url so we'll just going to assume that it will always be unique it's not the best practice practice but yeah you know for the tutorial it will be fine uh in real world scenario you should add like a identifier to each slide uh in uh you know to differentiate between the uh keys basically in different slides so we bind key slides like uh that's good that's good and the other thing that we need is uh a data index so the reason i'm putting a data index is uh you know we want to like put animation into it so and we are going to use data index for uh you know basically selecting this element and uh like adding any animations to it so i'm just going to say data index will take the value of i and what is i right so i have to bind this so i is like the index of the slide which we are in currently so the reason i'm binding is because this is a javascript expression and uh you know to in order to tell uh vue.js that you know you you need to use the value inside i i just have to bind it and uh v bind data index i i think that's pretty much it uh the other thing that i have to do is add a class to it so class will be absolute right absolute the reason being like all the slide will sit on top of them and the other will be shadow lg shadow lg is basically going to provide shadow to the whole you know to the whole element and inside this will be an img component image component with so i'm going to bind the source as well so we bind source slide so slide as i said in the slide will be the image the url of the image and i'm just going to close this and this is pretty much it right so now let's go here and pass our slides so i'm just going to say we bind slides equal to slides and here i'll create an internal local state um return slides and i'm just going to say all right so i'm going to use unsplash uh if you don't know about unsplash and splash is like you know like a uh i mean image provider but it lets you like uh generate um you know fetch random images so i'm just going to use that put it here and you can also specify the uh you know the you know height and width the dimensions of the image so i'm just going to say 800 into 400 and yeah so let's just go with this and let's create uh four slides all right i'm just going to put a comma here let's see if that works it should write see so is it working i don't think so yeah it is so you can see the image right uh if i inspect it you can see the five images right uh but the problem is that the the last image is coming at first you know because uh if you look at the hierarchy of you know the html that is created it is first element second element third and then the fourth element right zero one two three and the three because the three is the latest element it's going to be at the top right so we don't want that right we want to show the zeroth element the first element to be like shown first so in order to do that what we have to do is we have to uh you know make the other slides one two three to be like hidden all right so we have to hide them uh in our case we'll use display none uh which we can do is do by adding a hidden class to all the elements which is not the like which is not the first element right so what i'm going to do is if you're not familiar with the life cycle of ugs there is a life cycle hook called mounted which basically run when all of the html is mounted of the current element so what i'm going to do is mounted um i'm just going to say this i can use so i can just go with this this is the slides dot for each for each slide and index um i'll explain this logic in a bit cost element document dot query query selector and just say data index equal to the index all right and then i'm going to say aliment dot class list dot add hidden all right so what is happening here so basically what we are doing we are saying that take all the slides take their indexes uh for every index get the element and just add the class hidden to it why this works is because we have put this right so data index is there so it it it is added as a attribute so if you go um in here you can see it is added as an attribute for the first element 0 then 1 2 3 because that's how we are like how we defined it we said that you know for every loop you can use i as a data index so now what we are going to do is we are looping through all the slides and we are saying uh where the data index is zero where the data index is one just take the element for uh like every uh index and just add the class hidden and that's why you can see the hidden classes here right um but we don't want to add it to the first element so in our case what i will do is i'll create a local state here called data data right return uh i'll call it current current slide index and just say zero so always the first element will be the current slot index right so i mean most of the time so now we're just going to say the current slide index let's just do this if if index not equal to double equal to this dot um this dot current slide index if it is not equal to current side index just hide it you know for the first time when we are mounting right and let's go here see if that works it's reloading it's taking time all right let's see if that works so you can see that this doesn't have hidden class the 0th element but everything else have a hidden class right and that's what we wanted we wanted to show this element this uh element but not all the other elements right so that works great so the other thing uh we don't need this so i can just do maybe like this right so that's great now let's uh implement our next and previous button and try to animate these uh you know images so let's go here create another dev and create our button in those so there then i'm just going to say a button right a button and um this will be next i'm if i save it all right i think we are not able to see it the reason being if you if you go here this slider it doesn't have a height and because of that the element is going to the reason it doesn't have a height because all of its elements are like uh uh in a position absolutely so now what we're going to do is we are going to give it a height so we're going to we're just going to create a scored style and we're just going to say dot slider content have a height of 400 pixel like this and it should work right yeah so you can see um not 400 what is the height of this it's around 234 or something but uh what we're going to say is we're just going to make its height to 250. that's it so reload this page so image is loading until then let's uh style our component so let's go here and say v not v that's a class uh class equal to firstly we are going to say some padding pad uh not like this p uh from top let's say three from top three p from bottom three p from left five uh five p from right five all right let's do that so if you do that uh you know you can see uh there will be some i mean you can't see it but there will be some padding uh you can inspect it and see then what we're going to do is we are going to say uh let's give it a background background green maybe 400 right let's save it and let's give it rounded border and then let's uh make the font bolder right and then let's do a text white right it looks good uh in case you're wondering all these classes are tailwind so you can go ahead and you know check those and then i'm going to do the same thing with the previous previous uh the other thing that i'm going to do is i'm going to position them like uh like at the far most edges like one will be at the left one to the right i want to change the order basically here so let's do next at the right side and the left or the left side uh like the previous as the left side so in order to do that what i'm going to do is i'm going to make their parent i'm just going to choose a class and say d uh not d but flex and justify uh space between so justify between and what will basically happen is that you're not fully so basically we are making the uh container of flex uh you know we are setting the display of the containers of flex and then we just say that both of the child should have like space in between so it will like push both of the elements to the edges so previous next great but they don't work right now do they right so let's make them work and which is like the most tricky part um so we'll go ahead and define our next method so methods and inside method there will be uh on next right so what will happen on next our element should like you know uh change right somehow it should change so all right so let's uh get started with that uh we'll define uh like we'll go ahead with uh you know um we'll go ahead with uh by selecting the current element you know because we want to add some classes to it in order to animate so we'll start by that so firstly and foremost what i'm going to do is uh const element equal to document dot document dot query selector same thing uh it will be a data index and how do i know that you know what is the current index because we are already saving it inside the credit slide index so i'm just going to use that this dot this dot current slide index and i'm just going to wrap it in the template um great so we now have the element and we have to like animate it right so let's do that so i just pick this element i'll just pick this and i'm just going to say um i'm just going to say add some classes to it right or animate it somehow so in order to animate we basically have to like you know uh put some animation classes using animate.css so in order to do that first and foremost what i'm going to do is i'm going to create another method called animate and this animate function will be the you know the main function which will animate any of our component all right so the other thing that i want you to do is go to animate.css because we are using animate.css you can use any animation which is defined in animated css they are like a lot of animation you can see yellow heartbeat backing down or whatever right but the mean that we are going to use is fade in our left and right because you know it just gives a nice professional uh slider uh animation so so this is the like the animate function right so what we're going to do inside the animate function is we are going to animate the elements so we are going to pass the element that we want to animate we want to pass the animation that we want the you know element to like you know the text of the animation right so let's um right and then there will be another callback function we'll call it on animation and and this is basically you know uh will allow you to do some cleanup um you know functions for example if you want if you're sliding something you want to once it's slide you want to hide it then you know we are going to use on animation and or you want to do stuff other stuff like you know like providing a callback to the parent one animation and stuff like that right so element animation on animation and great the first thing that i want to do is element.classlist.ad we are going to add to the class so there is a one static class that we always have to add which is animate uh animate animated which is you know basically animate.css class if you um go here you can see you always have to add this uh you know it basically tells the animate that animated css is doing like you know this any uh this formula should be animated and uh this is the first class that we want and then the other basically other classes right which is the animation one so we just want to animate so we we are adding animate animated class the other uh class that we are adding is basically the animation that we want to like put here so this is one thing let's start let's you know check this out uh if this works so i'm going to use this animate copy this go here and say this dot animate we already have the element and the animation will be the which animation i want i want let's say light speed left not in but out the reason we want to do a out the reason we want to do out is not here yeah is that when you click on next the current element should you know goes out not come in but goes out and the other element should come in you know we will uh look into that but right now if you have to animate this uh you know slide it will go out like this right so whatever we are going to do is we are going to image slider is defined but never used yeah let's remove this for now because we don't need it and so let's just reload this and yeah let's see how it works uh yeah so i always forget to add like event listeners i'm not sure why i do it but yeah that's how i work so on click i'm just going to say on next one next right that's it so on next yeah i'm just going to reload it it will come with a random image again and let's click on next and also see the classes being changed alright so i'm just going to go here and let's see this is them so let's click on next and you can see the animation right it goes like this uh let's reload it and see for one second right so i go here i click on next and it animates right which is good but the other thing we want to do is we want to get the next uh slide to come in from the you know right right so what we are going to do is we are going to say const next element right cons next element equal to um the current index the current slide index plus one because that makes sense right uh it's like number plus one right so now we're going to do is we do the same thing we have to animate this let's do the same thing instead of digital current slide index we are going to use uh the next element next element and or i can say next element index and this element to to be next element and this to be next element and instead of out let's make this in and instead of left make this from right because it will come from right and it should work i guess it should let's see um so we are here and we have this let's click on next let's see what happens so it slides in and you can see the class getting added at the data index one the second element which is the second element so you can see the first element had light speed out left which you can see there but light speed in right is uh not working what is the reason the reason is that it has a hidden class and because of a hidden class you know you'll not be able to see it right because display none right so what we have to do we have to remove the display none so what i'm going to do is i'm going to universally think that whenever we are element like animating element we have to remove the hidden class all right so i'm just going to go here element dot remove class list dot remove and just say hidden so whenever you are animating remove the hidden classes all right i go reload let's see if that works right uh if i go inside app inside this inside this uh inside this you can see the element right let's see click on next and you can see right uh right so you can see it coming from there and just staying there so that's good but the problem is that it is not going moving forward and the reason it is not moving forward because the current slide index is not changing so we have to change the current slide index right so let's um it says current slide index equal to next element index right which makes sense right because uh now the current slide is the next slide right so let's go here reload the page and let's try to animate it all right so click on next next next right you can see the uh you know the image going out and then you can see this one problem i think you'll be able to see is that all the images are same the reason being uh this url you know once it hit their api it gives us an image and when you try to hit this url again the basically chrome is caching the image you know in order to trick the browser to think that we are we want to load a different image or we want to load a different url what we're going to do is we're going to do something like this which is like a this is like a harmless and uh like it does it there is no functionality related to it there's no uh change in how we load the image it's just we are just freaking the chrome browser to think that we are loading a different image and uh so don't cache cache it basically so when i will hit reload now if i click on next you can see right it loads different images which is great now the other problem is that if at the last you know if i'm at the last index and if i try to click next this will happen the reason being there is uh you know um if you go in the elements you know that we have passed like four slides right so there will be only four slides uh in here and the problem with that is once the four slides are completed our current slide index plus one become a five and then you know because the five doesn't exist it throws an error so in order to do that what i'm going to do is i'm going to create a function called get next slide index and what this function do is basically it returns the next slide so what i want to do is i want to do a whole round so what will happen is one two three four and after four there will it will again restart from one two three four like this right so it will be like a revolving slider basically so what we are going to do is uh for here is like if this dot current slide index plus one plus one is smaller than this dot slide so the slides dot length so basically the slides uh is a array pass to us so i can just get it length so what i'm going to say for example there are right now they have four slides right so it is uh the index number will be zero one two three so maximize can be three right so in case if it's already uh like for example if it's two and two plus uh you know two plus one is three the slides length is four so if it's like smaller than four then what uh we have to do is we can return this dot current slide index plus one all right so basically if it's two and two plus one is three and if it's still uh you know smaller than four then return the current uh plus one right so if it's two written three but if it's 3 3 plus 1 is not smaller than 4 then you know fall back to 0 right because 3 is the last element right like last index number like 0 1 2 3 and return zero right so basically when it's zero zero plus one is one so written one zero plus uh one plus one is two written two two plus one is three return three but three plus one is four which which is the index that doesn't exist goes to zero again right so this can be a little bit tricky but i if you have uh you know if you have experience in programming you already know that you know add start from zero and yeah so i click on next i click on next i click on next and then i then again i can click on next right okay it will not work because we haven't used it uh yeah so i'm just going to say this dot get next slide index and instead of a next element index i'm just going to say next slide index all right because you know just keep it you know common everywhere because everywhere we are using slide index and here it is uh like element index right so let's do that reload it uh and let's see click on next click on next click on next click on next not working why it's not working so the reason it doesn't work is that this element the first element which we want to show here already have a light speed out left animation you know and even if we add the light speed in right because you can see it it is here which is like the from the right it doesn't work because it already have that left animation so we have to remove any other animation on this element so in order to do that what we're going to do is we're going to do we're going to like get all the classes which it already have and remove all the other animation classes right so it's a bit tricky how i'm going to do is is like this so plain class list the reason i calling it plain class list is because the element.class so what we are basically going to do is from the class list array so we'll get all the class uh class names we're going to check which are the animation classes and remove them all right so the the problem with the class element.class is that it's not a array it's a dome token list uh which is you know kind of like a array but uh you know that's a whole different uh you know topic but yeah it's a tokenist and we have to convert it to array so in order to convert it to array what we are going to do is we are going to say array dot prototype proto array.prototype.slice.com and just put element.classlist and what it's going to do is it's going to convert it into a normal uh you know array so what we're going to do is const animations to remove equal to plane class list dot filter last name class name dot includes animate all right so basically what we are doing we are extracting all the classes from the classes which have the prefix animate so if it has the prefix animate then it should be removed basically before applying another animation like this right so you know all right so let's say class animation to remove and what i'm going to do is so we have array and you know we can just go here and just say triple dot the reason i'm able to do a triple dot here is that basically class list takes a you know uh you know a commas like all the classes that you want to remove in a comma separate manner so for example hidden comma this format this so i'm just going to spread the whole array which is like you know comma separated uh it will just pass all the argument in a common separated way so hidden and the other class then comma another class and comma another cluster i'm also going to console it so in order to make this simpler so console.log so you will be easily able to understand it so console just relate this let's click on next it will be empty make sense right now you can see right and now if i click on this again you can see you know i am able to animate between different uh you know uh different uh items the reason because you know i can do animate like sp uh i'm just removing all of these uh animation and adding new animation right great works makes sense now let's do a previous uh you know for uh moving to the previous slide let's create a function for that as well or method as we call it uh on previous this will be a bit different because you have to reverse the action so the current element will have slide speed in left because it will come from left and instead of get next slide we need a new function called get previous slide previous slide uh right next slide index instead of next slide index we're just going to say [Music] what i'm doing i don't have to remove the whole spring just going to say previous and here instead of next element i'm just going to say pre previous right this will be out because we want the current index to go like this because when you do a next it comes like this so when is previous will go like this right so light speed out left and light speed in from left and this will be right hmm i think it will work let's create our previous function instead of next this will be previous so in our case we are going to say if the current index is greater than zero then you can minus one so for example it's one you can minus one and get the zero which makes sense right and uh so you know minus one right but if it is zero or less than zero then you can't write then you can't uh minus it because if you if you're zero you minus it you will go to minus one which is not a valid index right so basically this is so if it's 2 you can minus 1 and get to 1 but if it's 1 and the new minus 1 again then it's become a 0 right which is which is good right which is fine but if you it's a zero and then you minus one again then it become minus one so we put a condition there and if it if it's zero then we uh if it's zero if it's already the first element then we will you know revolve around to the last element right so which is this dot uh slides dot length minus one so if the length is four the index should be three and it should work um i'm just going to add this on click to the previous button on previous let's see if this works i guess it should click on next next next next great it works like click on previous it doesn't work so this dot get previous slide is not a function let's say get to slide all right so okay that's fine so now let's go to previous previous previous previous great yeah so you can go to next in next next next great that works let's change the animation because this is a bit uh you know uh cartoonish so let's just say light speed still light speed say fade fade out fading right so let's just save this and reload this and see how that works so this looks great right let me go to previous as well uh but there is one problem still with this slider which is not visible but it is there and it's going to affect us [Music] if you are not careful so the problem is this uh when you click on next so just click on next this element it's still uh you can see it's still like uh hair right uh here and it's still here and uh it's basically not hidden right and it can cause issues with other elements you know at the side and all that stuff so you know in order to remove that what we are going to do we are going to say there is a on animation and function and what this on animation function do is if on animation then we are going to say ali element dot add event list no animation and so basically this is a you know even listener provided by native browsers uh when the cs animation is completed on an element element.listener on animation end and once true so once true basically what it will do is that it will only be fired once because we only want it to fire once uh you know when the animation is being like you know and the animation isn't happening so and what we're going to do is when something slide out of the viewport when it's not active like this we're going to say hide this element all right so we're going to say element dot class list dot add hidden so right now if you go here and if i click on next you can see the hidden being removed but not bad being getting added right which is not consistent with what we did at the start we know we we don't want other elements to be seen right we just want the current element to be seen and so we have to hide the other other thing right so classes that add hidden and the same thing we have to do for this thing you know which is basically fading out see if this works i think this should so images are loading great now let's go into our html let's see next and you can see the hidden class at the right and now it's not in the domain you can see it's it's not visible at dome which is like the right thing to do you know because we don't need it anymore and when you click on previous you can see right next click on next click on next and only you know you can see hidden hidden uh this is visible this is hidden and this is visible right so now the element can't you know uh you know uh create issues with other element on the page and yeah i mean guys this is pretty much it this is how you know we're going to create a slider from scratch in vue.js and on even in react or any other library and yeah so we basically created us image slider with different slides i can go ahead and even right so and you can see you know you can also customize the slides so i can you can have any number of slides you want so for example uh you know i have six slides now so i can just say five six i can reload the page one two three four five six and it will basically show me six lights uh the images are loading i click on next and you can see the three four five six and yeah again right and you can go previous if you want and yeah you can play with the animation you know you have animate.css uh you know you can like maybe position this previous next you know at the top that is also good so yeah guys this is pretty much it and please let me know if you like this these kind of videos you know and what kind of other topics that you want me to cover uh and yeah you know i'll come back with a new video on saturday so yeah that's till then have

Channel: Recraft Relic

Views: 579

Keywords:

Id: FRdHrYBN_Jc

Length: 48min 35sec (2915 seconds)

Published: Sat Jul 31 2021