Header we can see that we also have this slider over here so if I click on this this next button we go to the next slide and we have the previous button over here so we need to add this slider to.
Our header so for that we will use a library called swiper JS so you can just Google for swiper.js and you will find this website called swiper j.com so you can just go to the website and click on.
This get started button and you'll go to this URL called swiper j.com slet started now there are different ways to use swiper but we will use the cian option so let's.
Scroll down and here we have the option to use cian so we need to copy this swiper J mean CSS link and also this JavaScript link so let's copy this link from.
Now the next thing we need to do is we need to create the HTML so let's go outside this nav and here I'll just create a comment end of the nav bar and here let's create a header.
Tag and in this header tag we'll create a division and let's give it a class name of swiper and we'll also give it a unique name so I just name this header swiper now in this we'll create another.
Division with the class of swiper wrapper now in the swiper wrapper we will have all the slides now for the slides I'll give you the class name of.
Swiper slide now in the swiper slide we need to have all the content so I'll just create a division called content for that and in that we will have this image and then we need to have this text.
And this subheading so let's go ahead and create an IMG tag and in the Sr say let T images for Slash and I have this image called slide 1.jpg so it is inside this.
Posts Related:
- How To Add Video As A Background Using HTML & CSS - Live Blogger BlogSpot
- Free Invoice Template - How To Create an Invoice Using Google Docs Invoice Template
- How To Sync Excel & Google Sheets By Sending Quizzes & Receiving Results Automatically Part 2 Office
Images - ID Card Make
Folder and uh the next thing we need to add is the title so let's create a division with the class of slide title and let's add the title over here so.Let's type web development excellence and now we need to add the paragraph So let's create a P tag and here let's add some text now we need to have three different slides so.
Let's let's copy this swiper slide Division and let's paste it two more times and for the second one let's change the image to slide two and let's also change the title and now let's.
Change this paragraph right now for the third slide let's change the image to slide 3.jpg and let's change the title let's type app development Mastery and let's.
Add the subheading over here now if you go back to our design here we can see that we also have this next and previous buttons so for that we need to go ahead and create divisions let's go to the end.
Of this uh swiper wrapper Division and let's go outside this Division and let's create a division with the class of swiper button next and let's create another division.
With the class of swiper button priv so these are the next and the previous buttons now we don't need to add anything inside here it will be added using this this swiper JS library now if.
You go back to our design here we can see that we have the image displayed over here we also have these next and previous buttons but they are not working right now so let's go ahead and.
Add the JavaScript so let's go over here and uh I will add the JavaScript of this swiper JS library inside the HTML file itself so let's create a script tag over here now here we need to initialize the.
Slider so let's name it header swiper
Equals new swiper and here we need to add the element so if you scroll up here we can see that we have given it a class of header swiper so let's scroll down.And here let's type do header swiper and then we need to add some options so let's create an object for that and here first of all let's add the navigation so let's tap navigation and.
Here we need to provide the class name of the navigation buttons so the class names are swiper button next and Swiper button preve so here we need to type next.
L which is the next element and let's type do swiper button next and uh let's tap pre L and let's set it to swiper button pre right now let's add an option called.
Loop and let's set it to true so now when we are on the last slide and if you click on the next button it will go to the first slide and let's go ahead and add an autop play so let's Tap autop.
Play and uh let's set the delay and let's set it to 5,000 milliseconds which is 5 Seconds right now let's go back and here we have the slider and let's wait for 5.
Seconds and we can see that the next slide is being displayed so it is working all right now we need to style this using CSS and the next and the previous buttons are also.
Working so now let's go ahead and style this so let's go back and let's go to the CSS file let's scroll down and and uh let's create a comment I'll just call it header if you go back to the swiper.
JS website and if you scroll down here we can see that it says in addition to swiers CSS Styles we may need to add some custom styles to set the swiper size so we need to Target the swiper.
Division and we need to set the width and the height so let's go back and uh here let's type swiper and it is called header swiper so let's tap header swiper and in.
That we will have this swiper so let's type swiper and let's set the height to 100% and the width to 100% right now let's go back and here let's target header swiper and in that we have this.
Division with the class of swiper slide so let's type swiper slide and let's set the height to 100 vport height and now we can see that we have the correct height for the image right now let's.
Target the content Division and that we have the image and and the text so let's go ahead and bring all this content to the center so here we can see that all this content is in the center so let's.
Go ahead and Target this content division so let's tap header swiper swiper slide content and let's set the display to flex align items to the center and justify content to the center.
And uh let's also set the flex direction to column so that all the items are one below the other and now we can see that the text is not being displayed so we need to send this image behind the text.
So for that let's go ahead and Target the image so I just Ty header swiper swiper slide image and for the image I'll just set the position to Absolute and I'll.
Just set the top position to zero and the left position to zero and now let's go ahead and set the Z index of the image to1 and now if you scroll up here we can.
See that the text is being displayed over here at the top so let's let bring it to the center so here for the content we need to set the height to 100% and let's set the width to 100% as.
Well and now we have the text displayed over here and here for the image let's also set the height to 100% and the width to 100% and let's also type object fit to cover so that it has the correct.
Proportions and now the next thing we need to do is we need to add an overlay so here we can see we have this dark overlay and on top of of that we have this text so let's go back and for the.
Overlay we will add a before selector so let's tap header swiper swiper slide content colum colon before and uh we need to set the position of this before element relative.
To this content so here for the content we need to type position relative and here for before we need to type position absolute and let's set the.
Content to blank now what we need to do is we need to set the Left Right top and bottom position to zero so we can just type inser zero and we need to add background.
Color and uh we need to set it to rgba and 0 0 0 and here we need to add the opacity so for now I'll just type 0.9 and now if you go back here we can see we have this overlay and let's set.
The opacity to Let's TR 0.5 and this looks all right so now let's go ahead and style The Heading and this subheading now the text of the content is in white color so here let's.
Type color white and uh now let's go ahead and Target the title so for the title we have this division with the class of slide.
Title so let's type header swiper swiper slide slide title and let's set the font size to 50 pixels and let's set the font weight to bold and uh this is how it looks now we.
Can see that the overlay is on top of the text as well so here let's go ahead and add a z index and let's set it to three and now we can see the the text is on top of the overlay right now let's go.
Ahead and start F this paragraph let's go ahead and type header swiper swiper slide p and let's set the font size to 20 pixels and uh let's set the Z index to.
