Почему перебор элементов не работает по кругу

var slider = document.getElementsByTagName("article"); 
var count = slider.length - 1; 
 
function next() { 
  for (var i = 0; i < slider.length; i++) { 
    if (slider[i].style.zIndex === "10") { 
      slider[i].style.zIndex = 1; 
      slider[i + 1].style.zIndex = 10; 
      break; 
    } else if (slider[i].style.zIndex === "10" && i === count) { 
      slider[i].style.zIndex = 1; 
      slider[0].style.zIndex = 10; 
      break; 
    } 
 
  } 
}

<div style="margin: 10px auto; width:1216px; height: 400px; text-align: center;"> 
  <div style="width: 960px; display: inline-block; height: 400px; position: relative;"> 
    <article style="width:960px; height: 400px; position: absolute; background: url('1.jpg') no-repeat; z-index: 10;"></article> 
    <article style="width:960px; height: 400px;  position: absolute; background: url('2.jpg') no-repeat;   z-index: 0;"></article> 
    <article style="width:960px; height: 400px; position: absolute; background: url('3.jpg') no-repeat;   z-index: 0;"></article> 
    <article style="width:960px; height: 400px; position: absolute; background: url('4.jpg') no-repeat;   z-index: 0;"></article> 
    <article style="width:960px; height: 400px; position: absolute; background: url('5.jpg') no-repeat; z-index: 0;"></article> 
     
     
    <div onclick="next()" style="left:1000px; position: absolute; top: 180px; background: url('next.png') no-repeat; height: 68px; width: 68px;"></div> 
    <div onclick="prev()" style="right:1000px; position: absolute; top: 180px; background: url('prev.png') no-repeat;  height: 68px; width: 68px;"></div> 
  </div> 
</div>