Почему не вставляются элементы в slider при загрузке из JSON

мне нужно вставить в swiper продукты из JSON файла, но почему-то я их не вижу. Подскажите пожалуйста в чем проблема.

import Swiper, { Navigation, Pagination } from 'swiper';
function initSliders() {
if (document.querySelector('.best-pruducts__slider')) { 
    // Создаем слайдер
    const slider = new Swiper('.best-pruducts__slider', { 
        
        modules: [Navigation],
        observer: true,
        observeParents: true,
        slidesPerView: 3,
        spaceBetween: 0,
        autoHeight: true,
        speed: 800,
        loop: true,
        autoHeight: true,
        centeredSlides: true,

        //touchRatio: 0,
        simulateTouch: false,
        //loop: true,

        // Подгрузка изображений class к img "swiper-lazy"
        //preloadImages: false,
        //lazy: true,

        /*
        // Эффекты
        effect: 'fade',
        autoplay: {
            delay: 3000,
            disableOnInteraction: false,
        },
        */

        // Пагинация
        /*
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },
        */

        // Скроллбар
        /*
        scrollbar: {
            el: '.swiper-scrollbar',
            draggable: true,
        },
        */

        navigation: {
            prevEl: '.best-pruducts__arrow_prev',
            nextEl: '.best-pruducts__arrow_next',
        },

        
        breakpoints: {
            320: {
                slidesPerView: 1,
                spaceBetween: 0,
                autoHeight: true,
            },
            768: {
                slidesPerView: 3,
            },
            
        },
        
        // События
        on: {

        }
    });

    async function getSliderProducts() {
        const file = '../../files/products.json';
        let response = await fetch(file, {
            method: 'GET'
        });
        if(response.ok) {
            let result = await response.json();
            loadSliderProducts(result.productsSlider);
        } else {
            alert('Ошибка')
        }
    }

    function loadSliderProducts(data) {
        const sliderBody = document.querySelector('.best-pruducts__wrap');
        debugger
        data.forEach(item => {
            const productUrl = item.productUrl;
            const productId = item.id;
            const productTitle = item.title;
            const productText = item.text;
            const productImage = item.image;
            const productPrice = item.price;
            const productWeigh = item.weigh;

            let sliderHtml = `
                <div data-pid="${productId}" class="best-pruducts__slide slide-product">
                <a href="" class="slide-product__image">
                    <img src="img/best-products/${productImage}" alt="${productTitle}">
                </a>
                <div class="slide-product__info">
                    <a href="" class="slide-product__name">${productTitle}</a>
                    <div class="slide-product__text">${productText}, ${productWeigh}г.</div>
                    <div class="slide-product__price">${productPrice} грн</div>
                </div>
            <div class="slide-product__menu">
                <button class="slide-product__favourite">
                    <span>
                        <svg width="25" height="22" viewBox="0 0 25 22" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M12.0198 3.4383C11.3595 2.33774 9.85457 1.33611 8.08843 1.06881C6.35038 0.805758 4.39929 1.26092 2.82023 3.01545C1.74994 4.20468 1.23699 5.33783 1.06705 6.37876C0.896765 7.42174 1.06491 8.40897 1.41486 9.31302C2.12207 11.14 3.54744 12.5728 4.30213 13.3275C5.4529 14.4782 9.52379 18.0788 12.474 20.0949C15.4241 18.0788 19.495 14.4782 20.6458 13.3275C21.4005 12.5728 22.8259 11.14 23.5331 9.31302C23.883 8.40897 24.0512 7.42174 23.8809 6.37876C23.7109 5.33783 23.198 4.20468 22.1277 3.01545C20.5487 1.26092 18.5976 0.805758 16.8595 1.06881C15.0934 1.33611 13.5885 2.33774 12.9281 3.4383C12.8298 3.60218 12.6524 3.68941 12.474 3.6805C12.2956 3.68941 12.1182 3.60218 12.0198 3.4383ZM12.474 2.35683C11.5353 1.22353 9.96646 0.341656 8.23807 0.0800685C6.20257 -0.228 3.90366 0.316768 2.07693 2.34649C0.897223 3.6573 0.285168 4.96167 0.0801143 6.21763C-0.124603 7.47153 0.0822515 8.64056 0.482297 9.67401C1.27047 11.7101 2.83142 13.271 3.58193 14.0215L3.58194 14.0215L3.59503 14.0346C4.81112 15.2507 9.13651 19.0739 12.1712 21.0971C12.2642 21.159 12.3704 21.1858 12.474 21.1804C12.5776 21.1858 12.6838 21.159 12.7767 21.0971C15.8114 19.0739 20.1368 15.2507 21.3529 14.0346L21.366 14.0215L21.366 14.0215C22.1165 13.271 23.6775 11.7101 24.4656 9.67401C24.8657 8.64056 25.0725 7.47153 24.8678 6.21763C24.6628 4.96167 24.0507 3.6573 22.871 2.34649C21.0443 0.316768 18.7454 -0.228 16.7099 0.0800685C14.9815 0.341656 13.4126 1.22353 12.474 2.35683ZM18.5398 2.98408C18.6486 2.73027 18.9425 2.61269 19.1963 2.72147C20.4788 3.27108 22.4994 5.01615 22.4994 7.68104C22.4994 7.95718 22.2755 8.18104 21.9994 8.18104C21.7232 8.18104 21.4994 7.95718 21.4994 7.68104C21.4994 5.54593 19.8533 4.091 18.8024 3.64061C18.5486 3.53183 18.431 3.2379 18.5398 2.98408ZM17.4994 3.18104C17.7755 3.18104 17.9994 2.95718 17.9994 2.68104C17.9994 2.4049 17.7755 2.18104 17.4994 2.18104C17.2232 2.18104 16.9994 2.4049 16.9994 2.68104C16.9994 2.95718 17.2232 3.18104 17.4994 3.18104Z" fill="black"/> </svg>
                    </span>
                </button>
                <button class="slide-product__buy">
                    <span>
                        <svg width="30" height="33" viewBox="0 0 30 33" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M3.6001 16.9205H2.8501V17.6705V28.9999C2.8501 30.5187 4.08132 31.7499 5.6001 31.7499H24.4001C25.9189 31.7499 27.1501 30.5187 27.1501 28.9999V17.6705V16.9205H26.4001H3.6001Z" stroke="white" stroke-width="1.5"/> <rect x="0.75" y="12.3621" width="28.5" height="4.5588" rx="2.2794" stroke="white" stroke-width="1.5"/> <rect x="8.3999" y="21.3058" width="1.2" height="7.27056" rx="0.6" fill="white"/> <rect x="14.4001" y="21.3058" width="1.2" height="7.27056" rx="0.6" fill="white"/> <rect x="20.3999" y="21.3058" width="1.2" height="7.27056" rx="0.6" fill="white"/> <path d="M26.4001 11.9058C26.4001 9.01343 25.199 6.23949 23.0611 4.19425C20.9232 2.149 18.0236 1 15.0001 1C11.9766 1 9.077 2.149 6.93908 4.19424C4.80117 6.23948 3.6001 9.01343 3.6001 11.9058L15.0001 11.9058H26.4001Z" stroke="white" stroke-width="1.5"/> </svg>
                    </span>
                </button>
            </div>
                </div>
            `

            sliderBody.insertAdjacentHTML('beforeend', sliderHtml)
        })
    }

    getSliderProducts();
    slider.update()
}    

}

window.addEventListener('load', () => {


initSliders();

})