If function isn't receiving variables as expected

I'm trying to make an image slider which restarts to slide[0] when it reaches slides.length. The slider works except when it gets to the last slide it ends. The variables are not being received by startSlider() as it console logs:

"Index: 0. $slides: [object Object]. $slides.length: 0"

var $slider = $(".slides");
var $slides = $slider.find(`.slide${[index]}`);
var interval;

function startSlider() {
    interval = setInterval(() => {
        $(`.slide${[index]}`).animate({
        "margin-top": "-=" + height
        }, animationSpeed, firstSlide());
    }, pause);

    function firstSlide() {
        if (index >= $slides.length) {
            index = 0;
        }
        console.log(`Index: ${index}. $slides: ${$slides}. $slides.length: ${$slides.length}`) 
    }
};

It should receive the variable data from a global index variable in this for loop, which seems to work fine:

//FUNCTION TO CREATE THE IMG DOM ELEMENTS
var index;

function imgDomEl(imagearray, basepath) {
    for(index=0; index<imagearray.length; index++) {
        images = imagearray;
        img = document.createElement('img')
        var source = `src/${basepath}/${images[index]}`;
        img.src = source;
        img.style.height = '200px';
        img.className = `slide slide${[index]}`
        document.getElementById('images').appendChild(img);
    }
    console.log(images); // accurately logs the images
}

I also tried this but same results:

    function firstSlide() {
        index++;
        if (index >= $slides.length) {
            index = 0;
        }

I've tried using other variables to track the images but I'd like to be able to accurately track the image which is on screen for future mapping.