슬라이드 다음버튼 이전버튼 질문 있습니다

<div style="overflow: hidden">
<div class="slide-container">
<div class="slide-box"></div>
<div class="slide-box"></div>
<div class="slide-box"></div>
<div class="slide-box"></div>
<div class="slide-box"></div>
 
</div>
</div>

<button class="slide-1">1</button>
<button class="slide-2">2</button>
<button class="slide-3">3</button>
<button class="next">다음</button>
<button class="before">이전</button>

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
 
<script>
let slide = 1;

$('.next').on('click', function(){
$('.slide-container').css('transform', 'translateX(-' +slide + '00vw)')
slide = slide + 1
 })

$('.before').on('click', function(){
$('.slide-container').css('transform', 'translateX(-' +slide + '00vw)')
slide = slide - 1
 })
 
$('.slide-1').on('click', function(){
$('.slide-container').css('transform', 'translateX(0vw)')
slide = 1;
 })

$('.slide-2').on('click', function(){
$('.slide-container').css('transform', 'translateX(-100vw)')
slide = 2;
 })

$('.slide-3').on('click', function(){
$('.slide-container').css('transform', 'translateX(-200vw)')
slide = 3;
 })

이 부분에서 다음버튼은 정상적으로 작동 하는데 이전 버튼을 다음 버튼을 사용 후 
사용 했을 때 다음 슬라이드로 한번 이동 후 이전 버튼이 작동하는데 어떤 부분에서
수정해야 할까요??