Skip to content

Commit 0e9ac02

Browse files
tcbegleytcbegley
authored
Merge pull request #587 from AnnMarieW/carousel
Added Carousel component.
2 parents 8f8fd80 + 0a69a08 commit 0e9ac02

File tree

20 files changed

+475
-38
lines changed

20 files changed

+475
-38
lines changed

‎.github/workflows/doctest.yml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ jobs:
4949
version: '1.6.1'
5050
- name: Add Julia artifacts to repo for local install
5151
run: |
52-
git add -f deps src/*.jl Project.toml
52+
git add -f deps src/*.jl src/jl Project.toml
5353
git -c user.name="GitHub Actions" -c user.email="actions@github.com" commit -m "Add Julia build artifacts"
5454
- name: Install Julia dependencies
5555
run: julia -e 'using Pkg; Pkg.add(["Dash", "DashCoreComponents", "DashHtmlComponents", "HTTP"]); Pkg.add(path=".");'

‎.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,4 +38,5 @@ NAMESPACE
3838
# Julia build artifacts
3939
deps/
4040
src/*.jl
41+
src/jl
4142
Project.toml

‎docs/components_page/__init__.py

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,7 @@ def register_apps():
6464
"button": {"markdown_path": COMPONENTS / "button.md"},
6565
"button_group": {"markdown_path": COMPONENTS / "button_group.md"},
6666
"card": {"markdown_path": COMPONENTS / "card.md"},
67+
"carousel": {"markdown_path": COMPONENTS / "carousel.md"},
6768
"collapse": {"markdown_path": COMPONENTS / "collapse.md"},
6869
"dropdown_menu": {"markdown_path": COMPONENTS / "dropdown.md"},
6970
"fade": {"markdown_path": COMPONENTS / "fade.md"},

‎docs/components_page/components/carousel.md

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
---
2+
title: Carousel
3+
lead: Use the Carousel component to create a slideshow that cycles through a series of content.
4+
---
5+
6+
## Simple example
7+
8+
This is a carousel with slides only. The default cycle time is 5000ms, but here we use the `interval` prop to set the cycle time to 2000ms. Note that hovering over a slide pauses the slideshow.
9+
10+
{{example:components/carousel/simple.py:carousel}}
11+
12+
## With controls
13+
14+
Here we add the previous and next controls. The default is for the slideshow to autoplay after the user manually cycles the first item. Set `ride="carousel"` to start the slideshow on page load.
15+
16+
{{example:components/carousel/controls.py:carousel}}
17+
18+
19+
## With indicators
20+
21+
You can also add the indicators to the carousel, alongside the controls. Click on a bar to go to selected slide.
22+
23+
{{example:components/carousel/indicators.py:carousel}}
24+
25+
## With captions
26+
27+
You can add headings or captions to the slide by including the text in the `items` dictionary. `headings` are displayed in a `<h5>` element and the `captions` are in a `<p>` element.
28+
29+
{{example:components/carousel/captions.py:carousel}}
30+
31+
32+
33+
## Crossfade
34+
35+
The animation when changing the slide can be turned on or off using the `slide` parameter.
36+
Add `className="carousel-fade"` to your carousel to animate slides with a fade transition instead of a slide.
37+
38+
{{example:components/carousel/crossfade.py:carousel}}
39+
40+
## Control slideshow with callbacks
41+
42+
Control which slide number is displayed by using the `active_index` in a callback. This slideshow is being controlled by `dbc.RadioItems`
43+
44+
{{example:components/carousel/callback.py:carousel}}
45+
46+
{{apidoc:src/components/Carousel.js}}
47+

‎docs/components_page/components/carousel/callback.py

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import dash_bootstrap_components as dbc
2+
import dash_html_components as html
3+
from dash.dependencies import Input, Output
4+
5+
carousel = html.Div(
6+
[
7+
dbc.Carousel(
8+
id="carousel",
9+
items=[
10+
{"key": "1", "src": "/static/images/slide1.svg"},
11+
{"key": "2", "src": "/static/images/slide2.svg"},
12+
{"key": "3", "src": "/static/images/slide3.svg"},
13+
],
14+
controls=False,
15+
indicators=False,
16+
interval=False,
17+
),
18+
dbc.RadioItems(
19+
id="slide-number",
20+
options=[
21+
{"label": "Slide 1", "value": 0},
22+
{"label": "Slide 2", "value": 1},
23+
{"label": "Slide 3", "value": 2},
24+
],
25+
value=0,
26+
inline=True,
27+
),
28+
]
29+
)
30+
31+
32+
@app.callback(
33+
Output("carousel", "active_index"),
34+
Input("slide-number", "value"),
35+
)
36+
def select_slide(idx):
37+
return idx

‎docs/components_page/components/carousel/captions.py

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import dash_bootstrap_components as dbc
2+
3+
carousel = dbc.Carousel(
4+
items=[
5+
{
6+
"key": "1",
7+
"src": "/static/images/slide1.svg",
8+
"header": "With header ",
9+
"caption": "and caption",
10+
},
11+
{
12+
"key": "2",
13+
"src": "/static/images/slide2.svg",
14+
"header": "With header only",
15+
"caption": "",
16+
},
17+
{
18+
"key": "3",
19+
"src": "/static/images/slide3.svg",
20+
"header": "",
21+
"caption": "This slide has a caption only",
22+
},
23+
]
24+
)

‎docs/components_page/components/carousel/controls.py

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import dash_bootstrap_components as dbc
2+
3+
carousel = dbc.Carousel(
4+
items=[
5+
{"key": "1", "src": "/static/images/slide1.svg"},
6+
{"key": "2", "src": "/static/images/slide2.svg"},
7+
{"key": "3", "src": "/static/images/slide3.svg"},
8+
],
9+
controls=True,
10+
indicators=False,
11+
)

‎docs/components_page/components/carousel/crossfade.py

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import dash_bootstrap_components as dbc
2+
3+
carousel = dbc.Carousel(
4+
items=[
5+
{"key": "1", "src": "/static/images/slide1.svg"},
6+
{"key": "2", "src": "/static/images/slide2.svg"},
7+
{"key": "3", "src": "/static/images/slide3.svg"},
8+
],
9+
className="carousel-fade",
10+
)

‎docs/components_page/components/carousel/indicators.py

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import dash_bootstrap_components as dbc
2+
3+
carousel = dbc.Carousel(
4+
items=[
5+
{"key": "1", "src": "/static/images/slide1.svg"},
6+
{"key": "2", "src": "/static/images/slide2.svg"},
7+
{"key": "3", "src": "/static/images/slide3.svg"},
8+
],
9+
controls=True,
10+
indicators=True,
11+
)

‎docs/components_page/components/carousel/simple.py

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import dash_bootstrap_components as dbc
2+
3+
carousel = dbc.Carousel(
4+
items=[
5+
{"key": "1", "src": "/static/images/slide1.svg"},
6+
{"key": "2", "src": "/static/images/slide2.svg"},
7+
{"key": "3", "src": "/static/images/slide3.svg"},
8+
],
9+
controls=False,
10+
indicators=False,
11+
interval=2000,
12+
ride="carousel",
13+
)

0 commit comments

Comments
 (0)