Javascript-форум - Слайдер на классах

Всем привет. У меня есть код слайдера, реализованный с помощью ооп, но есть некоторые неполадки в коде, а именно, если переход начинается с первого слайда и идет дальше сам, то на последнем слайде он выходит за рамки, но в то же время если на последнем слайде нажать кнопку следующий слайд, то он переходит на первый, как и требуется. И еще был бы очень благодарен, если бы вы откорректировали мой ооп код.

Заранее благодарю за помощь. :)

var slideWrapper = function() {
        this.slideNow = 1;
        this.translateWidth = 0;
        this.slideCount = $('#slider').children().length;
    
    
    this.nextSlide = function() {
        if (this.slideNow == this.slideCount || this.slideNow <= 0 || this.slideNow > this.slideCount) {
            $('#slider').css('transform', 'translate(0, 0)');

            this.slideNow = 1;
        }

        else {
            this.translateWidth = -$('#viewport').width() * (this.slideNow);

            $('#slider').css({
                    'transform': 'translate(' + this.translateWidth + 'px, 0)',
                    '-webkit-transform': 'translate(' + this.translateWidth + 'px, 0)',
                    '-ms-transform': 'translate(' + this.translateWidth + 'px, 0)'
                }); 

            this.slideNow++;
        }
    };

    this.prevSlide = function() {
        if (this.slideNow == 1 || this.lideNow <= 0 || this.slideNow > this.slideCount) {
            this.translateWidth = -$('#viewport').width() * (this.slideCount - 1);

            $('#slider').css({
                    'transform': 'translate(' + this.translateWidth + 'px, 0)',
                    '-webkit-transform': 'translate(' + this.translateWidth + 'px, 0)',
                    '-ms-transform': 'translate(' + this.translateWidth + 'px, 0)'
                }); 

            this.slideNow = this.slideCount;
        } 

        else {
            this.translateWidth = -$('#viewport').width() * (this.slideNow - 2);

            $('#slider').css({
                    'transform': 'translate(' + this.translateWidth + 'px, 0)',
                    '-webkit-transform': 'translate(' + this.translateWidth + 'px, 0)',
                    '-ms-transform': 'translate(' + this.translateWidth + 'px, 0)'
                }); 

            this.slideNow--;
        }
    };
};

$(document).ready(function() {
    var slideInterval = 3000;
    var navButtonId = 0;
     
    var mainSlideWrapper = new slideWrapper();
    
    
    var switchInterval = setInterval(mainSlideWrapper.nextSlide, slideInterval);

    $('#viewport').hover(function() {
        clearInterval(switchInterval);
    }, function() {
        switchInterval = setInterval(mainSlideWrapper.nextSlide, slideInterval);
    });

    $('#next-button').click(function() {
        mainSlideWrapper.nextSlide();
    });

    $('#prev-button').click(function() {
        mainSlideWrapper.prevSlide();
    });

    $('.slide-nav-button').click(function() {
        navButtonId = $(this).index();

        if (navButtonId + 1 != mainSlideWrapper.slideNow) {
            mainSlideWrapper.translateWidth = -$('#viewport').width() * (navButtonId);
            
            $('#slider').css({
                'transform': 'translate(' + mainSlideWrapper.translateWidth + 'px, 0)',
                '-webkit-transform': 'translate(' + mainSlideWrapper.translateWidth + 'px, 0)',
                '-ms-transform': 'translate(' + mainSlideWrapper.translateWidth + 'px, 0)'
            }); 
            
            mainSlideWrapper.slideNow = navButtonId + 1;
        }
    });
});

Вот код HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Slider</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="css/main.css">
        <link rel="shortcut icon" href="#">
        <script src="js/jquery-3.3.1.js"></script> 
    </head>
    <body>
        <div id="block-for-slider">
            <div id="viewport">
                <ul id="slider">
                    <li class="slide"><img src="img/img1.jpg" alt="1" class="slide-img"></li>
                    <li class="slide"><img src="img/img2.jpg" alt="2" class="slide-img"></li>
                    <li class="slide"><img src="img/img3.jpg" alt="3" class="slide-img"></li>
                </ul>
                <div id="buttons">
                    <div id="prev-button"></div>
                    <div id="next-button"></div>
                </div>
                <ul id="nav-buttons">
                    <li class="slide-nav-button"></li>
                    <li class="slide-nav-button"></li>
                    <li class="slide-nav-button"></li>
                </ul>
            </div>
        </div>
        <script src="js/script.js"></script>
    </body>
</html>