Javascript-форум - После окончания карусели, приходится кликать второй раз

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - После окончания карусели, приходится кликать второй раз (https://javascript.ru/forum/misc/56360-posle-okonchaniya-karuseli-prikhoditsya-klikat-vtorojj-raz.html)

После окончания карусели, приходится кликать второй раз

Добрый день!
Учусь писать элементарную карусель.
Все работает как надо, только при прокрутке карусели заново, приходится нажать два раза кнопку, что бы она начала прокрутку.
Помогите, пожалуйста, сильно застрял и не могу понять в чем дело.

<style>
    #naspi li{
        display: inline-block;
        width:  200px;
        height:  100px;
        background-color: #000;
        margin: 20px;
        color: #fff;
        -webkit-transition: all 1s;
        -ms-transition: all 1s;
        -o-transition: all 1s;
        -moz-transition: all 1s;
        transition: all 1s;
        margin-left: 0;

    }

    #naspi{
        width: 800px;
        overflow: hidden;
        height: 100px;
    }

    ul {
        margin: 0;
        padding: 0;
    }
</style>


<ul id="naspi">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

<div onclick="vlev()">Влево</div>
<br>


<br>
<div id="cifr">0</div>

<script>
    var spis = document.getElementById("naspi");
    var skoka = spis.getElementsByTagName("li");

    var vnut = Number(document.getElementById("cifr").innerHTML);
    var vnutnc = document.getElementById("cifr");


    function vlev(){
        var cifogr = vnutnc.innerHTML;
        vnut = vnut + 1;
        vnutnc.innerHTML = vnut;

        if(vnut >= skoka.length - 3){
            vnut = -1;

            for(i=0; i<=skoka.length; i++){
                skoka[i].style.marginLeft = "0";
            }
        }


        skoka[cifogr].style.marginLeft = "-225px";
    }
</script>

у меня все заработало локально когда изменил for(i=0; i<=skoka.length; i++) на for(i=0; i<=skoka.length-1; i++)

Спасибо, но проблема же осталась. После возвращения всех кадров, приходится 2 раза нажать на кнопку для продолжения.
У меня и локально не работает. Смотрел в FF

vnutnc.innerHTML = vnut;
постав на в самом конце функции

раз 10 перепроверил , вроде работает

<style>
     li{
        display: inline-block;
        width:  200px;
        height:  100px;
        background: #000;
        margin: 20px;
        color: #fff;
        -webkit-transition: all 1s;
        -ms-transition: all 1s;
        -o-transition: all 1s;
        -moz-transition: all 1s;
        transition: all 1s;
        margin-left: 0;

    }
    ul li:nth-child(odd){
      background: red;
     }

    #naspi{
        width: 800px;
        overflow: hidden;
        height: 100px;
    }

    ul {
        margin: 0;
        padding: 0;
    }
</style>
</head>
<body>
	


<ul id="naspi">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

<div onclick="vlev()">Влево</div>
<br>


<br>
<div id="cifr">0</div>

<script>
    var spis = document.getElementById("naspi");
    var skoka = spis.getElementsByTagName("li");

    var vnut = Number(document.getElementById("cifr").innerHTML);
    var vnutnc = document.getElementById("cifr");


    function vlev(){
    	var cifogr = vnutnc.innerHTML;
         
         vnut = vnut + 1;
        
        
        
skoka[cifogr].style.marginLeft = "-225px";

        if(vnut >= skoka.length - 2){
        	console.log(vnut)
            vnut =  0;
            console.log(vnut)

            for(i=0; i<=skoka.length-1; i++){
                skoka[i].style.marginLeft = "0";
            }
        }

vnutnc.innerHTML = vnut;
 
        
        
    }
</script>

Спасибо огромное!!
А то я уже всю голову сломал