Click on the next button we can see that we can go to the next image and if you click on the previous button we can go to the previous image so this is what we're going to design in this video so.
Let's get started [Music] we'll start by writing our code in vyas code and then we'll copy our code to our blogger website so I have this empty.
Project called image slider and I have a folder called images inside that and I have three images which we'll be using for our image slider or a so let's get started by creating our necessary files.
We'll create an HTML file and we'll call it index dot HTML and then we also need a style dot CSS file and then we'll also need a JavaScript file so we'll just name it main dot J's all right let's.
Let's link our style dot CSS file over here and we'll also link our main dot J's file all right let's start with the markup so first of all let me open this with live server and we can see this is.
Our page and first of all we will have a division with a class of slider container and in that we'll have the previous button the images container and the next button so let's create a.
Division with the class of pre button and for now we'll just start Prevot over here and then we'll have a division with a class of slide images container so in this we'll have all the images for.
Our slider so for each images we'll create a division with the class of slide image and in that we'll have the image so we'll grab IMG and for the SRC real-time.
Images / 1 dot jpg so this is the first image let's copy this and we'll paste it two more times and we'll just change this to two dot jpg and 3-row jpg so we have all our images in our slider now.
Posts Related:
- How To Create A Drag & Drop Family Tree Maker In Excel FREE DOWNLOAD
- How We Built #RealPowerBI (Program to Get Free Power BI Help for Your Business) TalkPowerBI LIVE
- How to design Ice Cream Menu Card in MS Word Restaurant Ice Cream Menu DIY Tutorial
Let's also create one more
With the class of next button and we'll just type next over here so we can see we have the previous button the images and the next button now instead of pre.And next we will add the left and the right arrows like we have over here so for that we'll use font awesome so just search for font awesome five CDN and you'll get this link CDN J's calm so.
Just go to CSS and then copy this link from here and we'll paste it in the head section and here we will tap link and in the SS you just paste the link and to use font awesome you can just type a tag.
Called I and give it some classes so for the previous button we'll just stop FAS and we'll also have a class called FA Chevron left so this will give us the left arrow and for the next arrow we'll.
Just copy this and we'll paste it over here and we will type right alright so we have the previous and the next arrows now that's it with our HTML now let's go to our CSS and style this page first of.
All let me just give a margin of 0 to the body will not copy this to our blogger website we'll just have this for our demo here we'll just add a comment first of all you will style the slides.
Images container and for that we'll give it a height of 500 pixels we'll also set the overflow to hidden and then we'll style the slide image and we'll set the position of slide image to absolute so.
First of all we have to set the position of the container division so this is our container division slides images container so for this we will just give a position of relative and here we'll.
Try a position absolute so now we can see all the images are at the same position so let's also give it a width of 100% and a height of 100 percent of container now let's also style the.
Images inside the slide image and for
This will give of width of 100% of the parent and will also give a height of 100 percent of the container and we have a typo over here it should be slide.Images container so we'll just remove the s now we can see that the images have the perfect height but the images seemed to be a little stretched because we have increased the height 200% so for.
That we have a property in CSS called object fit and you can set it to any of these values over here so I'll just set it to cover and now we can see that the images have the perfect proportion.
Now let's style the next and the previous buttons so we have this container division called the slider container and in that we have the previous and the next buttons so we'll.
Set the position of the previous and the next buttons to absolute so we'll have to set the position of the slider container to relative so he will time slider container and we'll set the.
Position to relative and then he will type pre button and next button and we'll set the position to absolute and then we'll set the top to 50% and when we set the top to 50% it starts from the.
50% mark so we want to move it 50 percent upward so that we can have it perfectly in the center so we'll tap transform translate y and we'll type minus 50%.
All right now we have it perfectly in the center now let's give it a background color of white and let's set the color of the text to dark grey and we'll set the padding to 8 pixels and 16.
Pixels and we'll set the font size to 24 pixels and we'll also set the z-index to 100 so that it will always be on the top and then we'll also set the cursor to pointer so that we have this.
Hand icon when we hover over this and lastly let's set a box shadow of zero pixels three pixels eight pixels rgba 0 0 0 and 0.2 now we have both the next and the previous buttons in the same.
Position so for the next button we use at the right position to 0 so now we have the next in the previous buttons positioned correctly now what we'll do is we'll set the opacity of all the.
Slide images to 0 here we'll just type opacity 0 and we'll also set a transition of 700 milliseconds now we'll add an active class to which our image we want to show over here so.
He will create one more class and we'll name it slide image dot active and he'll tap opacity 1 so now this style will be applied to the element that has both the slide image and the active classes.
Applied so let's go to our index dot HTML and we will add the active class to the first slide image and we can see the first image is being displayed let's remove this from here and let's add it.
To the second image and we can see that the second image is active and that's it with the design of our custom image slider so I'll just stop this video right here and in the next video I will.
Show you how to add JavaScript and make the image slider work and then I'll also show you how to add this code to our blogger website so that's it for this video if you have any doubts you can ask.
In the comments below and click on the like button if you enjoyed this video and subscribe to this channel to get the latest video updates thanks a lot for watching have a nice day.
