All TalkersCode Topics

Follow TalkersCode On Social Media

devloprr.com - A Social Media Network for developers Join Now ➔

How To Make Slider In Html And CSS

Last Updated : Mar 11, 2024

How To Make Slider In Html And CSS

In this tutorial we will show you the solution of how to make slider in HTML and CSS, as we know css used to style html elements, here we used internal style method to make slider animation.

Usually slider means it will shows each image one by one like animation and we can use that concept to promote our products or company anything.

Mostly we can seen in all websites have like animation at front page they used this to promote their company to cover worldwide users attention.

Step By Step Guide On How To Make Slider In HTML And CSS :-

In our program we defined three <div> tags with separate class attribute’s ‘s1, s2 or s3’.

We used three div elements to make three slider then for make slider we need to give same size of sliders here we sets size to ‘width-100% and height-50rem’.

Then style property ‘position:absolute’ had importance because it is used to place three slides by one slide on another at same place to show slideshows.

When we hides one slide then another will show after few seconds it hides third slide will show this process happen infinite times to look like slideshow by using animation with opacity value.

<!DOCTYPE html>
<html>
    <head>
        <title>SLIDERS</title>
    <style>
    .s1{ background-color: red;
            width: 100%;
            height: 50rem;
            position:absolute;
            animation: slides 2s infinite;
        }
    .s2{ background-color: orange;
            width: 100%;
            height: 50rem;
            position:absolute;
            animation: slides 5s infinite;
        }
    .s3{ background-color: yellow;
            width: 100%;
            height: 50rem;
            position:absolute;
            animation: slides 10s infinite;
        }
        @keyframes slides{
            from{opacity: 0;}
            to{opacity: 1;}
        }
    </style>
    </head>
    <body>
        <div class="s1"><p>s1</p></div>
        <div class="s2"><p>s2</p></div>
        <div class="s3"><p>s3</p></div>
    </body>
</html>
  1. <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in.
  2. The<html> tag is used to indicate the beginning of HTML document.
  3. As above shown <head> tag is containing information about webpage and if you need any external file those links are declared here. <title> tag is used for set the webpage title.
  4. In <style> tag we defined three slide size of ‘width-100% and height-50rem’ and colors of ‘red,orange,yellow’ values then we placed three slides one on another by using ‘position:absolute’ property.
  5. Finally we sets animation ‘slides’ on each slide style property to make slideshow effect at last ‘slides’ animation defined by using ‘@keyframes’. There we sets start position to opacity of div as ‘0’ and end position to opacity of div sets to value ‘1’.
  6. Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
  7. <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
  8. We defined three <div> tags with different class attributes ‘s1,s2,s3’ and within div element we defined <p> tag with ‘s1,s2,s3’ texts for user verifications.
  9. Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.

Conclusion :-

In conclusion we are able to know how to make sliders using css and html.

When we execute this program on browser it will loads first slide of ‘red color’ for first 2seconds, after that first slide hides then we can 2nd slide of ‘orange color’ for 5seconds after that it hides finally third slide appears for 10seconds.

Those processes will happen infinite times so it will looks like actual slideshow.

We can also use three different images for this slideshow and we can make different styles of slideshows also using css later we will see about that.

I hope this tutorial on how to make slider in HTML and CSS helps you and the steps and method mentioned above are easy to follow and implement.