I want to make an infinite horizontal div scroll which appends the previous visible div to the current visible div when a user scrolls from left to right of the container. There can only be 1 div completely visible while others will be visible when user scrolls.

.slides{
    overflow-x :auto ;
    display:flex ;
} 
.slide{
    position: relative;
    margin: 10px 5px;
}

Markup

<div class="slides">
    <div class="slide">
        <!-Image with text->
    </div>
    <div class="slide">
        <!-Image with text->
    </div>
    <div class="slide">
        <!-Image with text->
    </div>
    <!-More horizontal slides->
</div>