Skip to content

Commit 37ab215

Browse files
TechQueryTechQuery
committed
[add] Carousel component
1 parent 36385c8 commit 37ab215

2 files changed

Lines changed: 213 additions & 2 deletions

File tree

‎document/source/components/Carousel.mdx‎

Lines changed: 211 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,211 @@
1+
---
2+
layout: docs
3+
title: Carousel
4+
description: A slideshow component for cycling through elements—images or slides of text—like a carousel.
5+
group: Components
6+
---
7+
8+
import { CarouselView } from 'boot-cell/source/Content/Carousel';
9+
10+
import { Example } from '../../../source/component/Example';
11+
12+
## How it works
13+
14+
The carousel is a slideshow for cycling through a series of content, built with CSS 3D transforms and a bit of JavaScript.
15+
It works with a series of images, text, or custom markup. It also includes support for previous/next controls and indicators.
16+
17+
In browsers where the [Page Visibility API][1] is supported, the carousel will avoid sliding when the webpage is not visible to the user
18+
(such as when the browser tab is inactive, the browser window is minimized, etc.).
19+
20+
> The animation effect of this component is dependent on the `prefers-reduced-motion` media query.
21+
> See the [reduced motion section of our accessibility documentation][2].
22+
23+
Please be aware that nested carousels are not supported, and carousels are generally not compliant with accessibility standards.
24+
25+
## Example
26+
27+
Carousels don’t automatically normalize slide dimensions. As such, you may need to use additional utilities or custom styles to appropriately size content.
28+
While carousels support previous/next controls and indicators, they’re not explicitly required.
29+
30+
### Slides only
31+
32+
Here’s a carousel with slides only.
33+
34+
<Example>
35+
<CarouselView
36+
list={[
37+
{ image: 'https://tech-query.me/medias/featureimages/6.jpg' },
38+
{ image: 'https://tech-query.me/medias/featureimages/7.jpg' },
39+
{ image: 'https://tech-query.me/medias/featureimages/21.jpg' }
40+
]}
41+
/>
42+
</Example>
43+
44+
```JavaScript
45+
import { render } from 'web-cell';
46+
import { CarouselView } from 'boot-cell/source/Content/Carousel';
47+
48+
render(
49+
<CarouselView
50+
list={[
51+
{ image: 'https://tech-query.me/medias/featureimages/6.jpg' },
52+
{ image: 'https://tech-query.me/medias/featureimages/7.jpg' },
53+
{ image: 'https://tech-query.me/medias/featureimages/21.jpg' }
54+
]}
55+
/>
56+
);
57+
```
58+
59+
### With controls
60+
61+
Adding in the previous and next controls:
62+
63+
<Example>
64+
<CarouselView
65+
controls
66+
list={[
67+
{ image: 'https://tech-query.me/medias/featureimages/6.jpg' },
68+
{ image: 'https://tech-query.me/medias/featureimages/7.jpg' },
69+
{ image: 'https://tech-query.me/medias/featureimages/21.jpg' }
70+
]}
71+
/>
72+
</Example>
73+
74+
```JavaScript
75+
import { render } from 'web-cell';
76+
import { CarouselView } from 'boot-cell/source/Content/Carousel';
77+
78+
render(
79+
<CarouselView
80+
controls
81+
list={[
82+
{ image: 'https://tech-query.me/medias/featureimages/6.jpg' },
83+
{ image: 'https://tech-query.me/medias/featureimages/7.jpg' },
84+
{ image: 'https://tech-query.me/medias/featureimages/21.jpg' }
85+
]}
86+
/>
87+
);
88+
```
89+
90+
### With indicators
91+
92+
You can also add the indicators to the carousel, alongside the controls, too.
93+
94+
<Example>
95+
<CarouselView
96+
controls
97+
indicators
98+
list={[
99+
{ image: 'https://tech-query.me/medias/featureimages/6.jpg' },
100+
{ image: 'https://tech-query.me/medias/featureimages/7.jpg' },
101+
{ image: 'https://tech-query.me/medias/featureimages/21.jpg' }
102+
]}
103+
/>
104+
</Example>
105+
106+
```JavaScript
107+
import { render } from 'web-cell';
108+
import { CarouselView } from 'boot-cell/source/Content/Carousel';
109+
110+
render(
111+
<CarouselView
112+
controls
113+
indicators
114+
list={[
115+
{ image: 'https://tech-query.me/medias/featureimages/6.jpg' },
116+
{ image: 'https://tech-query.me/medias/featureimages/7.jpg' },
117+
{ image: 'https://tech-query.me/medias/featureimages/21.jpg' }
118+
]}
119+
/>
120+
);
121+
```
122+
123+
### With captions
124+
125+
Add captions to your slides easily with the `title` & `detail` properties within any `CarouselItem`.
126+
They can be easily hidden on smaller viewports, as shown below, with optional [display utilities][3].
127+
We hide them initially with `.d-none` and bring them back on medium-sized devices with `.d-md-block`.
128+
129+
<Example>
130+
<CarouselView
131+
controls
132+
indicators
133+
list={[
134+
{
135+
image: 'https://tech-query.me/medias/featureimages/6.jpg',
136+
title: 'Mountain'
137+
},
138+
{
139+
image: 'https://tech-query.me/medias/featureimages/7.jpg',
140+
title: 'River'
141+
},
142+
{
143+
image: 'https://tech-query.me/medias/featureimages/21.jpg',
144+
title: 'Lake'
145+
}
146+
]}
147+
/>
148+
</Example>
149+
150+
```JavaScript
151+
import { render } from 'web-cell';
152+
import { CarouselView } from 'boot-cell/source/Content/Carousel';
153+
154+
render(
155+
<CarouselView
156+
controls
157+
indicators
158+
list={[
159+
{
160+
image: 'https://tech-query.me/medias/featureimages/6.jpg',
161+
title: 'Mountain'
162+
},
163+
{
164+
image: 'https://tech-query.me/medias/featureimages/7.jpg',
165+
title: 'River'
166+
},
167+
{
168+
image: 'https://tech-query.me/medias/featureimages/21.jpg',
169+
title: 'Lake'
170+
}
171+
]}
172+
/>
173+
);
174+
```
175+
176+
### Crossfade
177+
178+
Add `mode="fade"` to your carousel to animate slides with a fade transition instead of a slide.
179+
180+
<Example>
181+
<CarouselView
182+
mode="fade"
183+
controls
184+
list={[
185+
{ image: 'https://tech-query.me/medias/featureimages/6.jpg' },
186+
{ image: 'https://tech-query.me/medias/featureimages/7.jpg' },
187+
{ image: 'https://tech-query.me/medias/featureimages/21.jpg' }
188+
]}
189+
/>
190+
</Example>
191+
192+
```JavaScript
193+
import { render } from 'web-cell';
194+
import { CarouselView } from 'boot-cell/source/Content/Carousel';
195+
196+
render(
197+
<CarouselView
198+
mode="fade"
199+
controls
200+
list={[
201+
{ image: 'https://tech-query.me/medias/featureimages/6.jpg' },
202+
{ image: 'https://tech-query.me/medias/featureimages/7.jpg' },
203+
{ image: 'https://tech-query.me/medias/featureimages/21.jpg' }
204+
]}
205+
/>
206+
);
207+
```
208+
209+
[1]: https://www.w3.org/TR/page-visibility/
210+
[2]: https://getbootstrap.com/docs/4.4/getting-started/accessibility/#reduced-motion
211+
[3]: https://getbootstrap.com/docs/4.4/utilities/display/

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
{
22
"name": "bootcell-document",
3-
"version": "0.13.0",
3+
"version": "0.15.0",
44
"description": "Re-implemented Official Document site of BootStrap & FontAwesome based on WebCell, BootCell & MarkCell",
55
"dependencies": {
6-
"boot-cell": "^1.0.0-beta.3",
6+
"boot-cell": "^1.0.0-beta.4",
77
"cell-router": "^2.0.0-rc.6",
88
"classnames": "^2.2.6",
99
"lodash.groupby": "^4.6.0",

0 commit comments

Comments
 (0)