JS 드래그 숙제 질문입니다.

$('.slide-container').on('click',function() {
    var start_coor;
    var end_coor;
    var isClick = false;

    var page = $('.slide-box').eq(current_viewport);
    var container = $('.slide-container');
    
    page.on('mousedown', function(e) {  
        start_coor = e.clientX;
        isClick = true;
        container.css('transition', '');
    });
    
    page.on('mousemove', function(e) {  
        if (isClick) {
            end_coor = e.clientX;
            container.css('transform', `translateX(${end_coor - start_coor}px)`);
        }
    });
    
    page.on('mouseup mouseout', function() {
        if (isClick) {
            isClick = false;
            var tmp = end_coor - start_coor;
    
            container.css('transition', 'all 1s');
    
            if (tmp < -100 && current_viewport != 2) {
                current_viewport++;
            } else if (tmp > 100 && current_viewport != 0) {
                current_viewport--;
            }
    
            container.css('transform', `translateX(${current_viewport * -100}vw)`);
            console.log(current_viewport);
        }
    });
})

여기서 1번째 사진에서는 잘 작동이 되는데 2번째 사진에서 드래그를 했을때 방향과 상관없이 
1번째 사진에서 2번째 사진으로 움직입니다.

어떻게 해결하나요?