How to integrate Javascript for Owl carousel slider into a Plotly Dash App?

Dash Python
1

I want to display a brand logo carousel slider like this one with Dash: Bootstrap 4 clients brand logo carousel slider Example

I have imported the ressources as external_scripts and external_stylesheets and converted the html code to dash. What I get is a slider-div that does not display any images: slider not working

Can anyone see the mistake(s) in this? Or is this simply not possible in Dash? Any help would be highly appreciated.

The app-layout looks like this:

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="...jquery.min.js"
                ),
                html.Script(
                src="...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="assets/brands_1.jpg",
                                                                            alt="")
                                                                        ])
                                                                    ]),
                                                # Add more items here:
                                            ],
                                        )
                                    ],
                                )
                            ],
                        )
                    ],
                )
            ],
        ),
        html.Script(src=carousel_js)
        ])
2

Hello @tos,

Welcome to the community!

The html.Script is only included for completeness of the coding, at least if I remember. It doesn’t actually load the script.

To do that, you should use a .Js file in your assets folder.

You could also add the script directly as a clientside callback to the div showing.

For the other imports in your app, you can import them using external_scripts when you use app=Dash(__name__)

3

Thank you for the welcome and the help!

The scripts get loaded as “external_scripts” now, but unfortunately the images are still not beeing displayed. It seems like the
“./assets/brands_slider.js” is still not running properly. Is it possible that Dash somehow prevents it?

4

You need to wait for the element to actually appear.

What you could do, is instead of using the document.ready, just create the function.

Then have an id associated to one of your divs and do this:

app.clientside_callback(
"""
    function (v) {
        your_owl_function_call()
        return window.dash_clientside.no_update
    }
""", Output('yourid','id'), Input('yourid','id')

This will make it perform the call once upon loading. :slight_smile: