slide.css

body{
    padding: 0;
    margin: 0;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
.container{
    position: relative;
    width: 100%;
    height: 40vh;
    left: 0.3%;
    right: 0;
}

.container .slider{
    position: absolute;
    top: 0;
    left: 0;
    width: 500%;
    height: 100%;
    float: left;
    animation: animate 10s linear infinite;
}

.container .slider .slide{
    position: relative;
    width: 20%;
    height: 100%;
    float: left;
}
.container .slider .slide .captio{
    position: absolute;
    bottom: 60px;
    left: 60px;
    right: 60px;
    padding: 30px;
    background: rgba(31, 112, 125, 0.4);
    font-size: 28px;
    transition: 0.5s;
    
}
.container .slider .slide .captio h1{
    margin: 0;
    padding: 0;
    color: #fff;
    font-size: 48px;
    transition: 0.5s;

}
.container .slider .slide .captio p{
    margin: 0;
    padding: 0;
    color: #fff;
    font-size: 18px;
    transition: 0.5s;
}
.container .slider .slide.slide1{
    background-image: url(banner.jpg);
    background-size: cover;
    background-position: center;
}
.container .slider .slide.slide2{
    background-image: url(kk.jpg);
    background-size: cover;
    background-position: center;
}
.container .slider .slide.slide3{
    background-image: url(back.jpg);
    background-size: cover;
    background-position: center;
}
.container .slider .slide.slide4{
    background-image: url(1.jpg);
    background-size: cover;
    background-position: center;
}
@keyframes animate{
     0%{
         left: 0;
     }
     20%{
        left: 0;
    }
    25%{
        left: -100%;
    }
    45%{
        left: -100%;
    }
    50%{
        left: -200%;
    }
    70%{
        left: -200%;
    }
    75%{
        left: -300%;
    }
    95%{
        left: -300%;
    }

    100%{
        left: -400%;
    }
}
@media(max-width: 728px){
    .container .slider .slide .captio{
        position: absolute;
        bottom: 20px;
        left: 20px;
        right: 20px;
        padding: 20px;
        background: rgba(31, 112, 125, 0.4);
        font-size: 28px;
        
    }
    .container .slider .slide .captio h1{
        margin: 0;
        padding: 0;
        color: #fff;
        font-size: 28px;
    
    }
    .container .slider .slide .captio p{
        margin: 0;
        padding: 0;
        color: #fff;
        font-size: 14p  x;
    }
}