正如您在帖子中指出的，这里有很多代码，其中很多看起来是重复的，或者至少非常接近于在两个单击处理程序和传递给setInterval的函数之间重复。
所有基于现有类来确定下一张或上一张幻灯片的工作都是繁重的，并且会导致代码笨拙。我认为重要的概念飞跃是要认识到这里有一个重要的变量：活动索引。2当点击"上一页"或"下一页"按钮时，或者间隔触发时，活动索引会发生变化。3 UI只会更新以反映新的活动索引。
考虑到这一点，我将围绕 * state * 构建代码--更改了什么、活动索引和setInterval或setTimeout的标识符，我们需要跟踪它们以清除它。
从这里开始，我将把渲染封装到一个函数中。这个函数将切换幻灯片上的活动类和分页状态。单击处理程序可以更新状态，然后调用渲染函数。setInterval可以做同样的事情。（我最终使用了setTimeout，但我认为这真的是一个品味问题。）
我得到的密码是：

const state = {
  index: $('.slide--active').index(),
  timer: null,
  timerDurationMilliseconds: 2000,
  numSlides: $('.slide').length
};

const decrementIndex = () => {
  let newIndex = state.index - 1;
  
  if (newIndex < 0) {
    newIndex = state.numSlides - 1;
  }
  
  state.index = newIndex;
};

const incrementIndex = () => {
  let newIndex = state.index + 1;
  
  if (newIndex >= state.numSlides) {
    newIndex = 0;
  }
  
  state.index = newIndex;
};

const render = () => {
  $('.current').each(function () {
    const $this = $(this);
    $this.toggleClass('current--active', $this.index() === state.index);
  });
  
  $('.slide').each(function () {
    const $this = $(this);
    $this.toggleClass('slide--active', $this.index() === state.index);
  });
  
  if (state.timer) {
    clearTimeout(state.timer);
  }
  
  state.timer = setTimeout(() => {
    incrementIndex();
    render();
  }, state.timerDurationMilliseconds);
};

$('.next').on('click', function () {
  incrementIndex();
  render();
});

$('.prev').on('click', function () {
  decrementIndex();
  render();
});

render();

.pagination {
  display: flex;
}

.numbers {
  padding: 0 1em;
}

.slides {
  list-style: none;
  display: flex;
}

.slide {
  width: 4em;
  height: 4em;
  background: blue;
}

.slide--active {
  background: red;
}

.current {
  display: none;
}

.current.current--active {
  display: inline;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="pagination">
  <a href="#" class="prev">&larr;</a>
  <div class="numbers">
    <span class="current current--active">1</span>
    <span class="current">2</span>
    <span class="current">3</span> / <span class="total">3</span>
  </div>
  <a href="#" class="next">&rarr;</a>
</div>

<ul class="slides">
  <li class="slide slide--active"></li>
  <li class="slide"></li>
  <li class="slide"></li>
</ul>

我还创建了一个fiddle以供参考。

对于for neat concise code：

const
  slidesList    = document.querySelectorAll('.slides > li')
, btNext        = document.querySelector('#next')
, btPrev        = document.querySelector('#prev')
, currentNumber = document.querySelector('.numbers > span:first-of-type')
, slide = 
  { index   : 0
  , max     : slidesList.length
  , refIntv : 0
  , delay   : 2000
  };
// init...
movSlide();
slide.refIntv = setInterval( movSlide, slide.delay, 1);
document.querySelector('.numbers > span:last-of-type').textContent = slide.max;

btNext.onclick =()=>{ btMove( +1) }
btPrev.onclick =()=>{ btMove( -1) }

function btMove(val)
  {
  clearInterval(slide.refIntv);
  movSlide( val );
  slide.refIntv = setInterval( movSlide, slide.delay, 1);
  }
function movSlide( move = 0 )
  {
  slide.index += slide.max + move;
  slide.index %= slide.max;
  currentNumber.textContent = slide.index +1; 

  slidesList.forEach( (elm, i) => elm.classList.toggle('slide--active', slide.index===i) );
  }

.pagination {
  display    : flex;
  }
.numbers {
  padding : 0.3em 1em 0 1em;
  }
.slides {
  list-style : none;
  display    : flex;
  column-gap : 5px;
  }
.slides > li {
  width      : 4em;
  height     : 4em;
  background : blue;
  }
.slides > li.slide--active {
  background : red;
  }

<div class="pagination">
  <button id="prev">&larr;</button>
  <div class="numbers">
    <span></span> / <span></span>
  </div>
  <button id="next">&rarr;</button>
</div>

<ul class="slides">
  <li></li> <li></li> <li></li> <li></li> <li></li> <li></li>
</ul>

但是如果你想在你的界面中保持一致性，它应该像这样工作：
一个一个三个一个一个一个一个一个四个一个一个一个一个一个五个一个

let variable = setInterval(()=>{})
clearInterval(variable)

这是重置间隔的方法......