import dash_bootstrap_components as dbc carousel = dbc.Carousel( items=[ { "key": "1", "src": "/static/images/slide1.svg" }, { "key": "2", "src": "/static/images/slide2.svg" }, { "key": "3", "src": "/static/images/slide3.svg" }, ], className="carousel-fade", )
import dash_bootstrap_components as dbc carousel = dbc.Carousel( items=[ { "key": "1", "src": "/static/images/slide1.svg", "header": "With header ", "caption": "and caption", }, { "key": "2", "src": "/static/images/slide2.svg", "header": "With header only", "caption": "", }, { "key": "3", "src": "/static/images/slide3.svg", "header": "", "caption": "This slide has a caption only", }, ], variant="dark", )
import dash_bootstrap_components as dbc from dash import Input, Output, html carousel = html.Div( [ dbc.Carousel( id="carousel", items=[ {"key": "1", "src": "/static/images/slide1.svg"}, {"key": "2", "src": "/static/images/slide2.svg"}, {"key": "3", "src": "/static/images/slide3.svg"}, ], controls=False, indicators=False, interval=None, ), dbc.RadioItems( id="slide-number", options=[ {"label": "Slide 1", "value": 0}, {"label": "Slide 2", "value": 1}, {"label": "Slide 3", "value": 2}, ], value=0, inline=True, ), ] ) @app.callback(
import dash_bootstrap_components as dbc carousel = dbc.Carousel( items=[ { "key": "1", "src": "/static/images/slide1.svg" }, { "key": "2", "src": "/static/images/slide2.svg" }, { "key": "3", "src": "/static/images/slide3.svg" }, ], controls=True, indicators=False, )
app = Dash(__name__, external_stylesheets=[dbc.themes.SOLAR]) app.layout = dbc.Container([ dbc.Row([ dbc.Col([ html.H1("Our Cool Analytics Dashboard", style={"textAlign":"center"}) ],width=12) ]), dbc.Row([ dbc.Col([ dbc.Carousel( items=[ {"key": "1", "src": "/assets/Chapulin1.jpg", "caption":"My cat captions", "img_style":{"max-height":"500px"}}, {"key": "2", "src": "/assets/Chapulin2.jpg", "header":"My cat header", "img_style":{"max-height":"500px"}}, {"key": "3", "src": "/assets/Chapulin3.jpg", "img_style":{"max-height":"500px"}}, ], controls=True, indicators=True, interval=2000, ride="carousel", # className="carousel-fade" ) ], width=8) ], justify="center"), html.Br(), dbc.Row([ dbc.Col([ html.H2("All my graphs and charts below", style={"textAlign":"center"}), dcc.Graph(figure={}) ],width=12) ])