html - 如何使用 jquery 创建滑动循环？

Question

有几个选项可以通过点击按钮进行切换。但是，如果我单击最后一个选项或第一个选项，它将一无所获。当我单击可以返回到第一个的最后一个选项时，如何创建一个循环。

$('.pie-btn-prev').on('click', function() {
  $('.is-current').removeClass('active is-current').prev().addClass('active is-current')
});
$('.pie-btn-next').on('click', function() {

  $('.is-current').removeClass('active is-current').next().addClass('active is-current')
})

<div class="icon-box">
  <div class="pie-icon icon-1">
    <i class="fas fa-alien-monster"></i>
  </div>
  <div class="pie-icon icon-2">
    <i class="fas fa-alien-monster"></i>
  </div>
  <div class="pie-icon icon-3">
    <i class="fas fa-alien-monster"></i>
  </div>
  <div class="pie-icon icon-4">
    <i class="fas fa-alien-monster"></i>
  </div>
</div>

<div class="btn-box">
  <div class="pie-btn-prev">
    <i class="fal fa-long-arrow-left"></i>
  </div>
  <div class="pie-btn-next">
    <i class="fal fa-long-arrow-right"></i>
  </div>
</div>

标签： htmljquery