Почему в таком слайдере кнопка вправо работает через раз

[dengk]

Не пойму почему в таком слайдере кнопка вправо работает через раз?
Вроде функции работают правильно. И возможна ли такая конструкция?

<style>
	#slider{display:block;}		
	#slider li{list-style-type:none;float:left;margin:5px;padding:60px 10px;background-color:#53A805;font-size:500%;}
	.sl{display:none;}		
</style>

<ul id="slider">
	<li class="button"><span id="left">◄</span></li>
		<li class="sl">1</li>
		<li class="sl">2</li>
		<li class="sl">3</li>
		<li class="sl">4</li>
		<li class="sl">5</li>
		<li class="sl">6</li>
		<li class="sl">7</li>
		<li class="sl">8</li>
		<li class="sl">9</li>
		<li class="sl">10</li>
		<li class="sl">11</li>
		<li class="sl">12</li>
		<li class="sl">13</li>
		<li class="sl">14</li>
		<li class="sl">15</li>
		<li class="sl">16</li>
		<li class="sl">17</li>
		<li class="sl">18</li>
		<li class="sl">19</li>
		<li class="sl">20</li>
		<li class="sl">21</li>
		<li class="sl">22</li>
		<li class="sl">23</li>
	<li class="button"><span id="right">►</span></li>
</ul>

<script type="text/javascript">
	
	var show=4;
	var step=2;	
	var start=document.getElementById('slider').getElementsByTagName('li');
	var run=start.length-2;
	
	if(step>show){
		step=show;
	}
	
	if(run>=show){
		for(var l=1;l<=show;l++){
			start[l].style.display = "block";
		}
	}
	else{
		for(var m=1;m<=run;m++){
			start[m].style.display = "none";
		}	
	}
		
	var t=show;
	var p=1;
	
	function rightward(step){
		if((run-t)<step){		
			for(var r=t+1;r<=run;r++){
				start[r].style.display = "block";
			}			
			for(var f=(run+1-show)-(run-t);f<=(run-show);f++){
				start[f].style.display = "none";
			}		
			t=run;
			p=run+1-show;		
		}
		if((run-t)>=step){
			for(var v=t+1;v<=(t+step);v++){
				start[v].style.display = "block";
			}		
			for(var d=t+1-show;d<=(t-show+step);d++){
				start[d].style.display = "none";
			}
			t+=step;
			p=t+1-show; 
		}
	}
	document.getElementById('right').onclick=function(){rightward(step)}
	
	function leftward(step){
		if((p-1)>=step){
			for(var g=p-1;g>=(p-step);g--){
				start[g].style.display = "block";
			}
			for(var h=p-1+show;h>=(p+show-step);h--){
				start[h].style.display = "none";
			}
			t=p-1; 
			p-=step;
		}
		if((p-1)<step){		
			for(var q=p-1;q>=1;q--){
				start[q].style.display = "block";
			}
			for(var k=(run-1+show)-(run-p);k>=show+1;k--){
				start[k].style.display = "none";
			}
			t=show; 
			p=1;
		}
	}
	document.getElementById('left').onclick=function(){leftward(step)}
</script>

[рони]

dengk,

<style>
    #slider{display:block;}
    #slider li{list-style-type:none;float:left;margin:5px;padding:60px 10px;background-color:#53A805;font-size:500%;}
    .sl{display:none;}
</style>

<ul id="slider">
    <li class="button"><span id="left">◄</span></li>
        <li class="sl">1</li>
        <li class="sl">2</li>
        <li class="sl">3</li>
        <li class="sl">4</li>
        <li class="sl">5</li>
        <li class="sl">6</li>
        <li class="sl">7</li>
        <li class="sl">8</li>
        <li class="sl">9</li>
        <li class="sl">10</li>
        <li class="sl">11</li>
        <li class="sl">12</li>
        <li class="sl">13</li>
        <li class="sl">14</li>
        <li class="sl">15</li>
        <li class="sl">16</li>
        <li class="sl">17</li>
        <li class="sl">18</li>
        <li class="sl">19</li>
        <li class="sl">20</li>
        <li class="sl">21</li>
        <li class="sl">22</li>
        <li class="sl">23</li>
    <li class="button"><span id="right">►</span></li>
</ul>

<script>

    var show=4;
    var step=2;
    var li = document.querySelectorAll('#slider li:not(:first-child):not(:last-child)');
    var index = 0;
    function showLi(step)
    {
       index += step;
       index = Math.min(Math.max(0, index), li.length - show);
       li.forEach(function(el, i) {
       el.style.display = i < index || (index + show) <= i ? "none" : "block"
        })
    }
    showLi(0)
    document.getElementById('right').addEventListener("click", function() {
    showLi(step)
    })
    document.getElementById('left').addEventListener("click", function() {
    showLi(-step)
    })

</script>

[dengk]

рони спасибо за готовое решение, очень помогло.