.net core 使用blazor Webassembly将blazor组件动态添加到owlCarousel时出现问题

我正在从事一个项目，该项目在Blazor Webassembly中使用owl转盘作为主滑块。 如果我使用下面的代码动态加载带有幻灯片的滑块，旋转木马工作得非常好

@for (int i=0; i <= 4;  i++)
{
int skey = i;
    <SliderItem @key="skey" />
}  

这是启动旋转木马的javascript

// Content slider
window.carouselSlider = {
    startCarouselSlider: function () {
        $('.yt-content-slider').each(function () {
            var $slider = $(this),
                $panels = $slider.children('div'),
                data = $slider.data();
            // Remove unwanted br's
            //$slider.children(':not(.yt-content-slide)').remove();
            // Apply Owl Carousel
            $slider.owlCarousel({
                responsiveClass: true,
                mouseDrag: true,
                video: true,
                lazyLoad: (data.lazyload == 'yes') ? true : false,
                autoplay: (data.autoplay == 'yes') ? true : false,
                autoHeight: (data.autoheight == 'yes') ? true : false,
                autoplayTimeout: data.delay * 1000,
                smartSpeed: data.speed * 1000,
                autoplayHoverPause: (data.hoverpause == 'yes') ? true : false,
                center: (data.center == 'yes') ? true : false,
                loop: (data.loop == 'yes') ? true : false,
                dots: (data.pagination == 'yes') ? true : false,
                nav: (data.arrows == 'yes') ? true : false,
                dotClass: "owl-dot",
                dotsClass: "owl-dots",
                margin: data.margin,
                navText: ['', ''],

                responsive: {
                    0: {
                        items: data.items_column4
                    },
                    480: {
                        items: data.items_column3
                    },
                    768: {
                        items: data.items_column2
                    },
                    992: {
                        items: data.items_column1
                    },
                    1200: {
                        items: data.items_column0
                    },
                    1650: {
                        items: data.items_column00
                    }
                }
            });

        });
    }
}

注意：我还尝试将容器的引用传递给javascript，以便在显示幻灯片的循环完成后重新初始化旋转木马。像

<div class="module sohomepage-slider home-slider-size" @ref="sliderRef">
    <!—Slider with slides goes in here--!>
</div>

    ElementReference sliderRef;
    
    private void StartHomeSlider()
        {
            ijs.StartHomeSlider(sliderRef);
        }

但我得到的只是这个

拜托，我该怎么办

@code {
    protected async override Task OnAfterRenderAsync(bool firstRender)
    { 
        await js.StartSlider();
    }
}

// Content slider
window.carouselSlider = {
    startCarouselSlider: function () {
        $('.yt-content-slider').each(function () {
            var $slider = $(this),
                $panels = $slider.children('div'),
                data = $slider.data();
            // Remove unwanted br's
            //$slider.children(':not(.yt-content-slide)').remove();
            // Apply Owl Carousel
            $slider.owlCarousel({
                responsiveClass: true,
                mouseDrag: true,
                video: true,
                lazyLoad: (data.lazyload == 'yes') ? true : false,
                autoplay: (data.autoplay == 'yes') ? true : false,
                autoHeight: (data.autoheight == 'yes') ? true : false,
                autoplayTimeout: data.delay * 1000,
                smartSpeed: data.speed * 1000,
                autoplayHoverPause: (data.hoverpause == 'yes') ? true : false,
                center: (data.center == 'yes') ? true : false,
                loop: (data.loop == 'yes') ? true : false,
                dots: (data.pagination == 'yes') ? true : false,
                nav: (data.arrows == 'yes') ? true : false,
                dotClass: "owl-dot",
                dotsClass: "owl-dots",
                margin: data.margin,
                navText: ['', ''],

                responsive: {
                    0: {
                        items: data.items_column4
                    },
                    480: {
                        items: data.items_column3
                    },
                    768: {
                        items: data.items_column2
                    },
                    992: {
                        items: data.items_column1
                    },
                    1200: {
                        items: data.items_column0
                    },
                    1650: {
                        items: data.items_column00
                    }
                }
            });

        });
    }
}

<div class="module sohomepage-slider home-slider-size" @ref="sliderRef">
    <!—Slider with slides goes in here--!>
</div>

    ElementReference sliderRef;
    
    private void StartHomeSlider()
        {
            ijs.StartHomeSlider(sliderRef);
        }

window.homeSlider = {
    startHomeCarouselSlider: function (element) {
        var $slider = $(element.querySelector('.yt-content-slider'));
        var $panels = $slider.children('div');
        var data = $slider.data();
        alert($panels.length);

        // Remove unwanted br's
        $slider.children(':not(.yt-content-slide)').remove();
        // Apply Owl Carousel
        $slider.owlCarousel({
            responsiveClass: true,
            mouseDrag: true,
            video: true,
            lazyLoad: (data.lazyload == 'yes') ? true : false,
            autoplay: (data.autoplay == 'yes') ? true : false,
            autoHeight: (data.autoheight == 'yes') ? true : false,
            autoplayTimeout: data.delay * 1000,
            smartSpeed: data.speed * 1000,
            autoplayHoverPause: (data.hoverpause == 'yes') ? true : false,
            center: (data.center == 'yes') ? true : false,
            loop: (data.loop == 'yes') ? true : false,
            dots: (data.pagination == 'yes') ? true : false,
            nav: (data.arrows == 'yes') ? true : false,
            dotClass: "owl-dot",
            dotsClass: "owl-dots",
            margin: data.margin,
            navText: ['', ''],

            responsive: {
                0: {
                    items: data.items_column4
                },
                480: {
                    items: data.items_column3
                },
                768: {
                    items: data.items_column2
                },
                992: {
                    items: data.items_column1
                },
                1200: {
                    items: data.items_column0
                },
                1650: {
                    items: data.items_column00
                }
            }
        });
    }
}