HTML Code:-


<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div id="outerbox">
        <div id="sliderbox">
            <img src="1.jpg">
            <img src="2.jpg">
            <img src="3.jpg">
            <img src="4.jpg">
        </div>
    </div>
</body>
</html>

 

CSS Code:-

#outerbox{
    width: 1300px;
    overflow: hidden;
}
#sliderbox{
    position: relative;
    width: 5200px;
    animation-name:sanjoy;
    animation-duration: 20s;
    animation-iteration-count: infinite;
}
#sliderbox img{
    float: left;
    width: 1300px;
    height: 700px;
   
}
@keyframes sanjoy{
    0%{
        left: 0px;
    }
    20%{
        left: 0px;
    }
    25%{
        left: -1300px;
    }
    45%{
        left: -1300px;
    }
    50%{
        left: -2600px;
    }
    70%{
        left: -2600px;
    }
    75%{
        left: -3900px;
    }
    95%{
        left: -3900px;
    }
    100%{
        left: -5200px;
    }
}