Styling Header/Caption for Dash Bootstrap Carousel

Dash Python
1

Hello everyone, I am currently using the carousel from DBC in my interface. Right now I have an issue where the caption text from the carousel is hard to read in its current format. As such, I was wondering if anyone knows if it is possible to add custom styling to the captions/headers for the carousel in DBC?

I looked around on the documentation for DBC and couldn’t find anything that indicated if I could/how to do it, so any information would be appreciated!

2

Hi @Conor

Have you tried captionClassName ?

3

A bit biased as the creator of this other package, but you might be interested in checking out dash swiper, has a few more capabilites than dbc Carousel but maintains the same functionality but with custom transitions and larger changable text.

Also dash image gallery might be useful…

1 Like
4

I am testing it out right now, and it seems to not be working for me. Does swiper support animated png image files?

5

I have not, how would I go about using this?

6

Here’s an example


from dash import Dash, html
import dash_bootstrap_components as dbc

app = Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])

carousel = dbc.Carousel(
    items=[
        {
            "key": "1",
            "src": "https://raw.githubusercontent.com/facultyai/dash-bootstrap-components/main/docs/static/images/slide1.svg",
            "caption": "This is a caption",
            "captionClassName": "h1 text-primary"
        },
        {
            "key": "2",
            "src": "https://raw.githubusercontent.com/facultyai/dash-bootstrap-components/main/docs/static/images/slide2.svg",
            "header": "With header",
            "caption": "and caption",
        },
    ],
    variant="dark",

)

app.layout = html.Div(carousel)


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

You can create your own classes and put them in a .css file in the assets folder, or use the bootstrap utility class names:

https://dashcheatsheet.pythonanywhere.com/

1 Like
7

Swiper only works for .png/jpeg but the image gallary works with .png/.jpeg/.svg/.gif