jquery - Javascript スライダーが機能しない

Question

複数のボックスを持つ小さなスライダーを作成しようとしています。私は（たとえば）8つ持っており、一度に4つ表示する必要があります。それらは私がスライドさせたい小さなバナーのようなものです.

これまでの私のコードは次のとおりです。

HTML:

<div id="boxes">
    <div class="current">1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div class='box hide'>5</div>
    <div class='box hide'>6</div>
    ...
</div>

CSS:

#boxes div{
    width:400px;
    height:60px;
    background-color: red;
    color:white;
    margin: 20px 0;
}

.hide{display:none;}

Javascript:

$(function(){
    setInterval(show_boxes, 2000);
})

function show_boxes(){

     var curBox = $("#boxes div.current");
     var nxtBox = curBox.next();

     if(nxtBox.length == 0){
         nxtBox =  $("#boxes div:first");
     }

     curBox.removeClass('current').addClass('hide');
     nxtBox.addClass('current').removeClass('hide');

}