dmc.Carousel example

[AnnMarieW]

In a previous post, @pocholo asked about building a carousel banner in Dash, and whether to use an image with dynamic overlays or build the banner with HTML/CSS.

Here is a simple example using dmc.Carousel to build the slides from DMC components. Each slide has an image, text, and other components. No need to create the banner with custom HTML/CSS

The example also uses DMC style props instead of CSS for the styling.

Dash Mantine Components | Card

Dash Mantine Components | Style Props

import dash_mantine_components as dmc
from dash import Dash

app = Dash()

data = [
    {
        "image": "https://images.unsplash.com/photo-1500534623283-312aade485b7?auto=format&fit=crop&w=900&q=80",
        "category": "NATURE",
        "title": "Into the Mountains",
        "description": "Explore dramatic landscapes, alpine lakes, and quiet trails far from the city.",
    },
    {
        "image": "https://images.unsplash.com/photo-1507525428034-b723cf961d3e?auto=format&fit=crop&w=900&q=80",
        "category": "COAST",
        "title": "A Day by the Ocean",
        "description": "Long beaches, clear water, and the sound of waves make the coast an easy escape.",
    },
    {
        "image": "https://images.unsplash.com/photo-1448375240586-882707db888b?auto=format&fit=crop&w=900&q=80",
        "category": "FOREST",
        "title": "Into the Woods",
        "description": "Ancient trees and winding paths create a completely different kind of landscape.",
    },
    {
        "image": "https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?auto=format&fit=crop&w=900&q=80",
        "category": "ADVENTURE",
        "title": "Higher Ground",
        "description": "Mountain landscapes offer some of the most spectacular views in the world.",
    },
]


def make_slide(item):
    return dmc.CarouselSlide(
        dmc.Paper(
            [
                dmc.Image(
                    src=item["image"],
                    h=350,
                    w="100%",
                    fit="cover",
                ),
                dmc.Stack(
                    [
                        dmc.Text(
                            item["category"],
                            size="sm",
                            fw=700,
                            c="dimmed",
                            mt="md",
                        ),
                        dmc.Title(item["title"], order=2),
                        dmc.Text(
                            item["description"],
                            c="dimmed",
                        ),
                    ],
                    gap="xs",
                    p="lg",
                ),
            ],
            radius="md",
            withBorder=True,
            shadow="sm",
        )
    )


app.layout = dmc.MantineProvider(dmc.Container(
    [
        dmc.Title("Explore the Outdoors", order=1, mb="xl"),
        dmc.Carousel(
            [make_slide(item) for item in data],
            id="carousel",
            withIndicators=True,
            withControls=True,
            autoplay={"delay": 2000, "stopOnMouseEnter": True, "stopOnInteraction":False},
            slideGap="md",
            emblaOptions={
                "loop": True,
                "align": "center",
            },
        ),
    ],
    size="md",
    py="xl",
))

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