在具有相同类的多个元素上运行click事件

Question

我正在尝试使用按钮循环浏览列表（在点击时添加类）。我希望这可以同时处理多个列表集。目前它适用于第一个周期中的两个列表（一个周期 - 一个回合列表），但随后（进入第二轮）它停止在第二个列表上工作 - 第一个列表正常工作。

请告知。

function top_slider() {

    var next = function() {
      var active_slide = $(".active-slide");
      var next_slide = active_slide.next(".slide");
      if (next_slide.length === 0) {
        next_slide = $(".slide").first();
      }

      active_slide.removeClass("active-slide");
      next_slide.addClass("active-slide");

    }; //next

    var main = function() {
      $('.right').click(next);

    }; // main
    main();

  } //top-slider
top_slider(); // execute top slider function

html {
  font-size: 62.5%;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: 600;
  font-size: 3em;
}
.top-slides {
  width: 500px;
  display: block;
}
.top-slides li {
  display: block;
  height: 200px;
}
.top-slides li:nth-child(1) {
  background: #f53d39;
}
.top-slides li:nth-child(2) {
  background: #f7bf1d;
}
.top-slides li:nth-child(3) {
  background: #39b95b;
}
.top-slides li:nth-child(4) {
  background: #4387f8;
}
/* Arrows
==========*/

.controls {
  display: block;
}
.arrow {
  margin: 1em auto;
  width: 280px;
  text-align: center;
  background-color: #eee;
  padding: 0.5em 0;
  color: #333;
  text-decoration: none;
  text-transform: uppercase;
  transition: all 0.2s;
  box-shadow: 1px 1px 5px 0px rgba(50, 50, 50, 0.6);
  border-radius: 8px;
  display: inline-block;
  cursor: pointer;
}
.arrow:focus,
.arrow:hover {
  color: #eee;
  background-color: #333;
}
.left::before {
  content: '\25c4';
  padding-right: 0.5em;
}
.right::after {
  content: '\25ba';
  padding-left: 0.5em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<!-- this works as expected -->
<ul class="top-slides">
  <li class="slide active-slide"></li>
  <li class="slide"></li>
  <li class="slide"></li>
  <li class="slide"></li>
</ul>
<!-- this stops after first cycle -->
<ul class="top-slides">
  <li class="slide active-slide"></li>
  <li class="slide"></li>
  <li class="slide"></li>
  <li class="slide"></li>
</ul>

<!-- navigate through the list. Currently button "right" works -->
<ul class="controls">
  <li class="left arrow">Left</li>
  <li class="right arrow">Right</li>
</ul>

请参阅实时来源，了解按钮当前如何分配活动幻灯片课程。我相信脚本将两个列表视为一个，因此它只运行一次。