如何旋转元素并只显示其中的4个

我想编写一个显示团队所有成员的旋转框。总共有6个成员，但是该框应该只显示4个成员。使用next和prev箭头，访问者应该能够看到其他成员。

我当前的解决方案默认情况下使所有div.member不可见。然后在javascript中设置4个全局变量（display1-4），并为它们赋值（1-4）。每次下一次点击时，每个显示变量以1递增，如果大于6，则再次以1开始，分别以前开始。这部分有效。这是一个演示页面（我想制作一个JSFiddle，但它不起作用，或者你可以在这里看到页面：

// initial setting slider.js
      var display1 = 0;
      var display2 = 1;
      var display3 = 2;
      var display4 = 3;
      var maxno = 6;  // number of elements
      function ChangeSlide(direction) {
        if (direction == 'next') {  // arrow right
          display1 = display1 + 1;
          display2 = display2 + 1;
          display3 = display3 + 1;
          display4 = display4 + 1;
        } else {    // arrow left
          display1 = display1 - 1;
          display2 = display2 - 1;
          display3 = display3 - 1;
          display4 = display4 - 1;
        }
        // next gets higher than maxno
        if (display1 > maxno) {
          display1 = display1 - maxno;
        } else if (display2 > maxno) {
          display2 = display2 - maxno;
        } else if (display3 > maxno) {
          display3 = display3 - maxno;
        } else if (display4 > maxno) {
          display4 = display4 - maxno;
        }
        // prev gets lower than 1
        if (display1 < 1) {
          display1 = display1 + maxno;
        } else if (display2 < 1) {
          display2 = display2 + maxno;
        } else if (display3 < 1) {
          display3 = display3 + maxno;
        } else if (display4 < 1) {
          display4 = display4 + maxno;
        }
        // Make all existing IDs invisible
        document.getElementById('slide1').style.display = 'none';
        document.getElementById('slide2').style.display = 'none';
        document.getElementById('slide3').style.display = 'none';
        document.getElementById('slide4').style.display = 'none';
        document.getElementById('slide5').style.display = 'none';
        document.getElementById('slide6').style.display = 'none';
        // Make specified ID visible again
        document.getElementById('slide' + display1).style.display = 'inline-block';
        document.getElementById('slide' + display2).style.display = 'inline-block';
        document.getElementById('slide' + display3).style.display = 'inline-block';
        document.getElementById('slide' + display4).style.display = 'inline-block';
      }
ChangeSlide('next');

.member {
      display: none;
      width: 100px;background: #FF0000;box-sizing: border-box;
    }

<p><a onclick="ChangeSlide('prev')">PREV</a> -- <a onclick="ChangeSlide('next')">NEXT</a></p>
<div class="teambox">
  <div class="member" id="slide1"><span>Member 1</span></div>
  <div class="member" id="slide2"><span>Member 2</span></div>
  <div class="member" id="slide3"><span>Member 3</span></div>
  <div class="member" id="slide4"><span>Member 4</span></div>
  <div class="member" id="slide5"><span>Member 5</span></div>
  <div class="member" id="slide6"><span>Member 6</span></div>
</div>

但有一个逻辑错误：如果我在下一个上点击三次，它应该按以下顺序显示成员：

4, 5, 6, 1

相反，它显示的是这样的

1, 4, 5, 6

当向后滑动时也会出现类似的逻辑缺陷。

我的想法是相应地交换子元素，其中一种方法是

// move first child element (team member) to the last position 
var list = document.querySelector(".teambox");
list.appendChild(list.firstElementChild);

这会让整个订单更加混乱，尤其是因为我没有一个解决方案可以用同样的方式来解决问题。

如果有一个没有像jQuery这样沉重框架的解决方案，我会很高兴。提前谢谢！