*{
    margin: 0;
    padding: 0;
}

.slider{
    width: 100%;
    height: auto;
    overflow: hidden;
}

figure{
    position: relative;
    left: 0;
    width: 400%; /* width dikali slide */
    animation: 10s slide infinite;
}

.slide{
    position: relative;
    width: 25%; /* width dibagi slide */
    float: left;
}

.slide img{
    width: 100%;
    height: auto;
}

@keyframes slide{
    0%{
        left:0;
    }
    10%{
        left:0;
    }
    20%{
        left:-100%;
    }
    30%{
        left:-100%;
    }
    40%{
        left:-200%;
    }
    50%{
        left:-200%;
    }
    55%{
        left:-300%;
    }
    65%{
        left:-300%;
    }
    66%{
        left:-200%;
    }
    74%{
        left:-200%;
    }
    75%{
        left:-100%;
    }
    85%{
        left:-100%;
    }
    90%{
        left:0;
    }
    1000%{
        left:0;
    }
}



 iframe {
        display: block;
        background: #000;
        border: none;
        height: 50vh;
        width: 50vw;
    }