Can't get Bootstrap Carousel to work (with external scripts)

Dash Python
21

Actually, here is their suggested version:

import dash
from dash import html, Output, Input

external_scripts = [
    {
        "src": "https://code.jquery.com/jquery-3.3.1.slim.min.js",
        "integrity": "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo",
        "crossorigin": "anonymous",
    },
    {
        "src": "https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js",
        "integrity": "sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM",
        "crossorigin": "anonymous",
    },
]

external_stylesheets = [
    {
        "href": "https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css",
        "rel": "stylesheet",
        "integrity": "sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T",
        "crossorigin": "anonymous",
    }
]

app = dash.Dash(
    __name__,
    external_scripts=external_scripts,
    external_stylesheets=external_stylesheets,
)

app.layout = html.Div(
    [
        html.Div(
            id="carouselExampleSlidesOnly",
            className="carousel slide",
            **{"data-ride": "carousel"},
            children=[
                html.Div(
                    className="carousel-inner",
                    children=[
                        html.Div(
                            className="carousel-item active",
                            children=[html.P("one")],
                        ),
                        html.Div(
                            className="carousel-item",
                            children=[html.P("two")],
                        ),
                        html.Div(
                            className="carousel-item",
                            children=[html.P("three")],
                        ),
                    ],
                )
            ],
        )
    ]
)

app.clientside_callback(
    """function (id) {
        $('.carousel').carousel()
        return window.dash_clientside.no_update
    }""",
    Output('carouselExampleSlidesOnly', 'id'),
    Input('carouselExampleSlidesOnly', 'id')
)

if __name__ == "__main__":
    app.run_server(debug=True)

According to their docs here:

1 Like