Виджет-слайдер на JavaScript, помогите пожалуйста исправить код

Всем привет! Помогите пожалуйста доработать код. не могу понять почему не показывается изображение на виджете. Сами изображения хранятся на Я.диске, а ссылка на каждое изображение в Excel, данный виджет создан для дашборда (программа Visiology).

var slider = {
    images: [],
    labels: [],
    activeImageIndex: 0,
    slider: null,
    init: () => {
        slider.slider = document.getElementById(w.general.renderTo);
        slider.slider.style = "display: flex; flex-wrap: wrap; overflow-y:auto;";

        let images = [];
        let labels = [];

        for (let i in w.data.primaryData.items) {
            let dataFrame = w.data.primaryData.items[i];
            images.push(dataFrame.keys[0]);
            labels.push(dataFrame.keys[1]);
        }

        slider.images = images;
        slider.labels = labels;

        slider.draw();
    },

    draw: () => {
        slider.slider.innerHTML = "";
        slider.slider.style = `
            width: 100%;
            height: 100%;
        `;

        let container = document.createElement("div");
        container.style =`
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            font-family: sans-serif;
            align-items: center;
        `;
        slider.slider.appendChild(container);

        let imageSliderContainer = document.createElement("div");
        imageSliderContainer.style = `
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 100%;
            width: 100%;
        `;

        // LEFT ARROW
        let leftSliderArrow = document.createElement("span");
        leftSliderArrow.style = `
            font-size: 30px;
            margin-right: 10px;
            cursor: pointer;
            user-select: none;
        `;
        leftSliderArrow.innerHTML = "<span>&#9001;</span>";

        // RIGHT ARROW
        let rightSliderArrow = document.createElement("span");
        rightSliderArrow.style = `
            font-size: 30px;
            margin-left: 10px;
            cursor: pointer;
            user-select: none;
        `;
        rightSliderArrow.innerHTML = "<span>&#9002;</span>";

        let imageContainer = document.createElement("div");
        imageContainer.style = `
            height: 100%;
            width: auto;
            margin-bottom: 10px;
        `;
        let imageButton = document.createElement("input");
        imageButton.style = `
            width: 100%;
            height: 100%;
        `;
        imageButton.type = "image";

        imageContainer.appendChild(imageButton);

        imageButton.onclick = (target) => (slider.drawEnlargeImage(target));

        imageSliderContainer.appendChild(leftSliderArrow);
        imageSliderContainer.appendChild(imageContainer);
        imageSliderContainer.appendChild(rightSliderArrow);
        
        // ITEM IMAGE LABEL
        let imageLabel = document.createElement("div");
        imageLabel.style = `
            margin-top: 15px;
            width: 100%;
            font-family: Open Sans;
            font-size: 18px;
            text-align: center;
            font-weight: normal;
            font-style: normal;
            line-height: 1.5;
        `;

        if (slider.activeImageIndex == 0) {
            imageButton.src = slider.images[slider.activeImageIndex];
            imageLabel.innerHTML = slider.labels[slider.activeImageIndex];
        }

        container.appendChild(imageSliderContainer);

        // ITEM IMAGE INDICATOR
        let indicatorList = document.createElement("div");
        indicatorList.style = "display: flex; margin-top: 5px;";

        let indicators = [];

        for (let j in slider.images) {
            let indicator = document.createElement("div");
            indicator.style = "margin: 0 3px 0 3px; background-color: grey; width: 8px; height: 2px;";
            indicator.style.opacity = "50%";

            if (j == 0) {
                indicator.style.opacity = "90%";
            }

            indicators.push(indicator);
            indicatorList.appendChild(indicator);
        }

        leftSliderArrow.onclick = () => {slider.leftClick(imageButton, imageLabel, indicators)};
        rightSliderArrow.onclick = () => {slider.rightClick(imageButton, imageLabel, indicators)};

        container.appendChild(indicatorList);
        slider.slider.appendChild(imageLabel);
    },

    // LEFT CLICK SLIDER
    leftClick: (imageElement, imageLabel, indicators) => {
        if (slider.activeImageIndex == 0) {
            slider.activeImageIndex = slider.images.length - 1;
        }
        else {
            slider.activeImageIndex--;
        }

        imageElement.src = slider.images[slider.activeImageIndex];
        imageLabel.innerHTML = slider.labels[slider.activeImageIndex];

        for (let j in slider.images) {
            indicators[j].style.opacity = "50%";
        }

        indicators[slider.activeImageIndex].style.opacity = "90%";
    },

    // RIGHT CLICK SLIDER
    rightClick: (imageElement, imageLabel, indicators) => {
        if (slider.activeImageIndex == slider.images.length - 1) {
            slider.activeImageIndex = 0;
        }
        else {
            slider.activeImageIndex++;
        }

        imageElement.src = slider.images[slider.activeImageIndex];
        imageLabel.innerHTML = slider.labels[slider.activeImageIndex];

        for (let j in slider.images) {
            indicators[j].style.opacity = "50%";
        }

        indicators[slider.activeImageIndex].style.opacity = "90%";
    },

    // ZOOM IMAGE IN CARD
    drawEnlargeImage: (target) => {
        let src = target.target.src;
        let modal;

        function removeModal() {
            modal.remove();
        }

        modal = document.createElement("div");
        modal.id = "modal-background";
        modal.style = `
            background: RGBA(0,0,0,.5);
            backgroundSize: contain;
            width: 5920px;
            height: 5200px;
            position: fixed;
            zIndex: 10000;
            top: -2000px;
            left: -2000px;
            cursor: zoom-out;
            display: flex;
            justify-content: center;
            align-items: center;
        `;

        let imageCard = document.createElement("div");
        imageCard.style = `
            background: white;
            border: 1px grey solid;
            border-radius: 8px;
            padding: 5px;
            cursor: pointer;
            position: absolute;
            height: auto;
        `;

        let enlargedImage = document.createElement("img");
        enlargedImage.src = src;
        enlargedImage.style = `
            height: 600px;
            width: auto;
        `;

        let header = document.createElement("div");
        header.style = `
            display: flex;
            justify-content: flex-end;
            align-self: end;
        `;

        let closeButton = document.createElement("div");
        closeButton.style = `
            color: black;
            font-size: 26px;
            cursor: pointer;
            margin-right: 5px;
            position: absolute;
            top: 15px;
            right: 15px;
        `;
        closeButton.innerHTML = "<span>&#x2715</span>";
        closeButton.onclick = () => { removeModal() };
        header.appendChild(closeButton);

        imageCard.appendChild(header);
        imageCard.appendChild(enlargedImage);

        modal.appendChild(imageCard);

        modal.onclick = (target) => {
            if (target.target.id == "modal-background") {
                removeModal();
            }
        }

        slider.slider.appendChild(modal);

        // handling ESC
        document.body.onkeydown = (e) => {
            if (e.key === 'Escape') {
                removeModal();
            }
        }
    },
};

slider.init();