dmc.Carousel docs now available

Dash Python
1

Hi Everyone,

Did you know that dash-mantine-components has a Carousel component? The docs are now available - be sure to check it out!

The cool thing about this carousel is that you can include any component, not just images. Check out the example below that has cards with buttons in each slide.

Note that the carousel component requires an additional external stylesheet. So you can use either

app = Dash(external_stylesheets=dmc.styles.ALL)

or

app = Dash(external_stylesheets=[dmc.styles.CAROUSEL])


import dash_mantine_components as dmc
from dash import Dash, _dash_renderer, html
_dash_renderer._set_react_version("18.2.0")


app = Dash(external_stylesheets=dmc.styles.ALL)

data = [
    {
        "image": "https://images.unsplash.com/photo-1508193638397-1c4234db14d8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400&q=80",
        "title": "Best forests to visit in North America",
        "category": "NATURE",
    },
    {
        "image": "https://images.unsplash.com/photo-1559494007-9f5847c49d94?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400&q=80",
        "title": "Hawaii beaches review: better than you think",
        "category": "BEACH",
    },
    {
        "image": "https://images.unsplash.com/photo-1608481337062-4093bf3ed404?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400&q=80",
        "title": "Mountains at night: 12 best locations to enjoy the view",
        "category": "NATURE",
    },
    {
        "image": "https://images.unsplash.com/photo-1510798831971-661eb04b3739?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400&q=80",
        "title": "Best places to visit this winter",
        "category": "TOURISM",
    },
    {
        "image": "https://images.unsplash.com/photo-1582721478779-0ae163c05a60?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400&q=80",
        "title": "Active volcanos reviews: travel at your own risk",
        "category": "NATURE",
    },
]


def make_card(image, title, category):
    return dmc.Paper(
        [
            html.Div(
                [
                    dmc.Text(category, c="white", opacity=0.7, fw=700),
                    dmc.Title(title, lh=1.2, order=3, mt="xs", fw=900, c="white"),
                ]
            ),
            dmc.Button("Read Article", variant="white", color="dark"),
        ],
        shadow="md",
        p="xl",
        radius="md",
        style={
            "backgroundImage": f"url({image})",
            "height": 440,
            "display": "flex",
            "flexDirection": "column",
            "justifyContent": "space-between",
            "alignItems": "flex-start",
            "backgroundSize": "cover",
            "backgroundPosition": "center",
        },
    )


carousel = dmc.Carousel(
    [dmc.CarouselSlide(make_card(d["image"], d["title"], d["category"])) for d in data],
    id="carousel-cards",
    align="start",
    w=400,
    loop=True

)

app.layout = dmc.MantineProvider(
    dmc.Container(carousel, mt=20)
)

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

dmcCarousel

3 Likes
2

Hi, would it be possible to introduce a parameter which indicates the current carousel element? This could be useful if a user wants to go to a specific image in the carousel or for example making a slideshow.

3

Hi @dasher1

Yes, there is already a feature request to add an active prop. In the meantime, you can use the initialSlide prop as a workaround. You can find an example in the GitHub issue:

2 Likes
4

Oh, I didn’t see. Thanks!

Maybe someone finds it useful, I used clientside_callback approach:

app.clientside_callback(
        """
        function (nc) {
            // Get the mantine-Carousel-control elements by class name
            const carousel = document.getElementsByClassName("mantine-Carousel-control");

            // Get the last element of the mantine-Carousel-control elements
            const last = carousel[carousel.length - 1];

            // Click on that button every 2 seconds but only if the corresponding browser tab is focused
            if (nc) {
                setInterval(() => {
                    if (document.hasFocus()) {
                        last.click();
                    }
                }, 2000);
            } else {
                clearInterval();
            }

            return false;
        }
        """,
        Output("start-slideshow", "disabled"),
        Input("start-slideshow", "n_clicks"),
        prevent_initial_call=True
    )
1 Like