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)
])