[рони]

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>