Make Slider in CSS by vubwn | Slider using only CSS and HTML

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Slider VU BWN</title>

    <style>

        *{

            margin: 0px;

            padding: 0px;

        }

        .slider{

            background-image: url("images/pic_1.jpg");

            background-size: cover;

            background-repeat: no-repeat;

            box-shadow: 0.3rem 0.3em 0.7rem 0.7rem rgb(151, 145, 145);

            width: 50rem;

            height: 20rem;

            margin: auto;

            margin-top: 4rem;

            animation: eagle 10s infinite;

        }

        .slider:hover{

            background-image: url("images/pic_1.jpg");

            background-size: cover;

            background-repeat: no-repeat;

            box-shadow: 0.3rem 0.3em 0.7rem 0.7rem rgb(121, 235, 87);

            width: 50rem;

            height: 20rem;

            margin: auto;

            margin-top: 4rem;

            animation-play-state: paused;

        }

        @keyframes eagle {

            0%{                

                background-image: url("images/pic_1.jpg");

                background-size: cover;

            }

            20%{                

                background-image: url("images/pic_2.jpg");

                background-size: cover;

            }

            40%{                

                background-image: url("images/pic_3.jpg");

                background-size: cover;

            }

            60%{                

                background-image: url("images/pic_4.jpg");

                background-size: cover;

            }

            80%{                

                background-image: url("images/pic_5.jpg");

                background-size: cover;

            }

        }

        .title{

            color: rgb(73, 13, 13);

            font-size: 2rem;

            margin-left: 12rem;

        }

    </style>

</head>

<body>

    <div class="title">THIS IS SLIDER IN CSS ON VU BWN YOUTUBE CHANNGEL KEEP WATCHING!</div>

    <div class="slider"></div>

</body>

</html>

                    

    

                              

 Watch Video For full Details