.slider {
    overflow: hidden;
}

.slides {
    width: 118vw;
    height: auto;
    animation: glisse 10s infinite; 
    display: flex;
}

.slide {
    position: relative;
    float:right;

}

@keyframes glisse {
    0% {
        transform: translateX(0);
    }
    10% {
        transform: translateX(0);
    }
    33% {
        transform: translateX(-33.5%);
    }
    43% {
        transform: translateX(-33.5%);
    }
    66% {
        transform: translateX(-67%);
    }
    76% {
        transform: translateX(-67%);
    }
    100% {
        transform: translateX(0);
    }
}

@media screen and (max-device-width: 800px) {
    @keyframes glisse {
    0% {
        transform: translateX(0);
    }
    10% {
        transform: translateX(0);
    }
    33% {
        transform: translateX(-20%);
    }
    43% {
        transform: translateX(-20%);
    }
    66% {
        transform: translateX(-50%);
    }
    76% {
        transform: translateX(-50%);
    }
    100% {
        transform: translateX(0);
    }
}

}