I have designed a unique slider for users to view the work process https://i.sstatic.net/FLYne.png
When a user clicks the button, the slider will move left or right depending on the button clicked. However, if the user clicks multiple times, the slider may move too far and leave a large gap as shown in the image below https://i.sstatic.net/6vIXV.png
Is there a way to make the slider stop when there are no more items behind it, like in picture 3?
https://i.sstatic.net/ptZCO.png
jQuery(document).ready(function($){
var direction = 1;
const slideSec = document.querySelector('.movingsec .container');
const slideItem = document.querySelectorAll('.movingsec .image-box');
var maxItem = slideItem.length;
$('.btnPrev').click(function(){
direction = 0;
runSlide(direction);
});
$('.btnNext').click(function(){
direction = 1;
runSlide(direction);
});
var current = 0;
function runSlide(direction){
if(direction === 1){
current = current + 1;
if(current === maxItem){
current = maxItem - 1;
}
}
if(direction === 0){
current = current - 1;
if(current < 0){
current = 0;
}
}
var destination = current * 215;
$(slideSec).css('transform','translateX(-'+destination+'px)');
}
});
The snippet above showcases the code I have developed for this slider.