如果有超过4张幻灯片，则初始化创建6轨道

Question

我有以下标记：

<section class="projects-holder">
  <ul class="">
    <li class="single-project"> Porject-1 </li>
    <li class="single-project"> Project-2 </li>
    <li class="single-project"> Project-3 </li>
    <li class="single-project"> Project-4 </li>
    <li class="single-project"> Project-5 </li>
  </ul>
</section>

用它的CSS：

.projects-holder ul{height:inherit; margin-left:0;}
.projects-holder img{margin-top: 20px;}
.projects-holder li{ 
  width: 100%;
  border-bottom: 1px solid #333;
  background-color: #faa;
  min-height: 100px;
}

@media screen and (min-width: 40em) {

    .projects-holder {overflow: hidden; height:100%;}

    .projects-holder li{    
        height: 100%;
        width: 25%;
        float: left;
        list-style-type: none;
        border-right: 1px solid #333;
    }

}

及其js：

$(document).foundation();

if($('.projects-holder li').length == 4){
    console.log('no need for caorusel');
}
else{
    var elem = new Foundation.Orbit($('.projects-holder'));
    console.log(elem);
}

我原本以为我可以滑到第五张幻灯片，但它没有发生..我认为这会照顾所有的计算：var elem = new Foundation.Orbit($('.projects-holder'));