Проблема со слайдером jQuery! Что я делаю неправильно?

Question

Adik Izat @JaxAdam

Junior Full-Stack Developer

JavaScript

Проблема со слайдером jQuery! Что я делаю неправильно?

Вот страница: adilzhan.intermediaastana.kz/arplus/index.php

Подключен скрипт, в котором возможно будут какие-нибудь скрипты(буду делать дальше не я, а бэкэндчик, начальник сказал создать). А для реализации слайдера нашел в инете код для слайдера на jQuery. Только вот проблема: слайдер не работает. Вообще мне это не обязательно делать. Но охота прокачаться, и выяснить в чем же проблема. Помогите, пожалуйста, добрые люди!;) Скрипт слайдера подключил снизу тэга body, как было указано в туториале.

HTML:

<div id="viewport">
            <ul id="slidewrapper">
                <li class="slide">
                    <img src="images/slider-1.jpg" alt="1" class="slide-img">
                </li>
                <li class="slide">
                    <img src="images/slider-2.jpg" alt="2" class="slide-img">
                </li>
                <li class="slide">
                    <img src="images/slider-3.jpg" alt="3" class="slide-img">
                </li>
            </ul>
        </div>

CSS:

#viewport{
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

#slidewrapper{
    display: inline-flex;
    align-items: start;
    justify-content: left;
    -webkit-transition: 1s;
    -o-transition: 1s;
    transition: 1s;
    -webkit-transition-timing-function: ease-in-out;
    -o-transition-timing-function: ease-in-out;
    transition-timing-function: ease-in-out;
}

#slidewrapper ul, #slidewrapper li {
    margin: 0;
    padding: 0;
}

.slide{
    width: 100vw;
    height: 85vh;
    position: relative;
    top: 0;
    left: 0;
}

.slide-img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#slidewrapper ul{
    list-style: none;
}

jQuery скрипт:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
        var slideNow = 1;
        var slideCount = $('#slidewrapper').children().length;
        var translateWidth = 0;
        var slideInterval = 2000;

        $(document).ready(function () {
            setInterval(nextSlide, slideInterval);
        });

        if (slideNow === slideCount || slideNow <= 0 || slideNow > slideCount) {
            $('#slidewrapper').css('transform', 'translate(0, 0)');
            slideNow = 1;
        } else {
            translateWidth = -$('#viewport').width() * (slideNow);
            $('#slidewrapper').css({
                'transform': 'translate(' + translateWidth + 'px, 0)',
                '-webkit-transform': 'translate(' + translateWidth + 'px, 0)',
                '-ms-transform': 'translate(' + translateWidth + 'px, 0)',
            });
            slideNow++;
        }
        function nextSlide() {
        }
    </script>