/*css*/
ul,li{
        margin: 0;
        padding: 0;
    }
    .slider{
        width: 100%;
        height: 300px;
        overflow: hidden;
    }
    .slider_box{
        width: 500%;
        height:100%;
        transition: all 0.3s;
    }
    .slider_box>ul{
        width: 100%;
        height:100%;
        white-space: nowrap;
    }
    .slider_box>ul>li{
        display: inline-block;
        width: 20%;
        height: 100%;
    }
    .slider_box>ul>li:nth-of-type(0){
        background: #000088;
    }
    .slider_box>ul>li:nth-of-type(1){
        background: #004444;
    }
    .slider_box>ul>li:nth-of-type(2){
        background: #221199;
    }
    .slider_box>ul>li:nth-of-type(3){
        background: #AA1111;
    }
    .slider_box>ul>li:nth-of-type(4){
        background: #E38D13;
    }

/*html*/
<p class="slider">
    <p class="slider_box">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </p>
</p>

/*js*/
var list = document.getElementsByClassName("slider_box")[0];
    var arr = list.children;
    var test = 0;
    function slide(){
        if(test<5){
        list.style.transform = "translateX(-"+test*20+"%)";
        test++;
        setTimeout("slide()",1000);
        }    
        }
    slide();

As shown in the above code, every one second, the slider_box slides 20% to the left (1 screen), but the problem comes, when it slides to 100%, it can no longer slide to the left (if you slide further, there will be no picture), and The effect I saw in some other plug-ins is that every one second, the sliding of slider_box changes from -20% to 0 and then to -20%. In this way, the processing will not exist. When the slider_box slides to 100% and then slides again, it will run out. The problem is the area, so the question is how do these plug-ins handle the change of slider_box from -20% to 0 and then to -20%? In the above code, I tried to clear the last sliding style first, and then set this sliding style. style:

function slide(){
        list.style.transform = "translateX(-20%)";
        if(test<5){
//            list.style.transform = "translateX(-"+test*20+"%)";
            list.style.transform = "translateX(0)";
            test++;
            setTimeout("slide()",1000);
        }    
        }
    slide();

But I can't realize the changes, and it doesn't slide anymore. So to achieve the same effect as the plug-in, how should I deal with it here?
Is it because people don't follow this idea at all?
The js method in the plug-in is too encapsulated, so I’m sorry that I really don’t understand it.
Another: plug-in link: http://sc.chinaz.com/jiaoben/...