如何将 Owl 轮播滑块的 Javascript 集成到 Plotly Dash 应用程序中？

Question

我想用 Dash 应用程序显示一个品牌徽标轮播滑块： https://bbbootstrap.com/snippets/clients-brand-logo-carousel-slider-20683486

我已将资源导入为 external_scripts 和 external_stylesheets 并将 html 代码转换为破折号。我得到的是一个不显示任何图像的 slider-div：

有人能看出其中的错误吗？或者这在 Dash 中根本不可能吗？任何帮助将不胜感激。

应用程序布局如下所示：

carousel_js = $(document).ready(function(){
   if($('.brands_slider').length)
        {
            var brandsSlider = $('.brands_slider');
            brandsSlider.owlCarousel(
            {
                loop:true,
                autoplay:true,
                autoplayTimeout:5000,
                nav:false,
                dots:false,
                autoWidth:true,
                items:8,
                margin:42
            });
            if($('.brands_prev').length)
            {
                var prev = $('.brands_prev');
                prev.on('click', function()
                {
                    brandsSlider.trigger('prev.owl.carousel');
                });
            }
            if($('.brands_next').length)
            {
                var next = $('.brands_next');
                next.on('click', function()
                {
                    brandsSlider.trigger('next.owl.carousel');
                });
            }
        }
    });

app.layout = html.Div(
            className="brands",
            children=[
                html.Script(
                src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
                ),
                html.Script(
                src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.js"
                ),
                html.Div(
                    className="container",
                    children=[
                        html.Div(
                            className="row",
                            children=[
                                html.Div(
                                    className="col",
                                    children=[
                                        html.Div(
                                            className="brands_slider_container",
                                            children=[
                                                html.Div(
                                                    className="owl-carousel owl-theme brands_slider",
                                                    children=[
                                                        html.Div(
                                                            className="owl-item",
                                                            children=[
                                                                html.Div(
                                                                    className="brands_item d-flex flex-column justify-content-center",
                                                                    children=[
                                                                        html.Img(
                                                                            src="https://res.cloudinary.com/dxfq3iotg/image/upload/v1561819026/brands_1.jpg",
                                                                            alt="")
                                                                        ])
                                                                    ]),
                                                # Add more items here:
                                            ],
                                        )
                                    ],
                                )
                            ],
                        )
                    ],
                )
            ],
        ),
        html.Script(src=carousel_js)
        ])

（我希望滑块显示品牌标志，让它们从右向左缓慢滑动。）