@aurodesignsystem/auro-devops-component 1.0.0-rc-1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +60 -0
- package/LICENSE +201 -0
- package/NOTICE +2 -0
- package/README.md +189 -0
- package/custom-elements.json +1628 -0
- package/demo/api.html +56 -0
- package/demo/api.js +1 -0
- package/demo/api.md +787 -0
- package/demo/api.min.js +3 -0
- package/demo/auro-slideshow.min.js +3327 -0
- package/demo/index.html +59 -0
- package/demo/index.js +6 -0
- package/demo/index.md +197 -0
- package/demo/index.min.js +6 -0
- package/dist/auro-slideshow-rYdnH7og.js +127 -0
- package/dist/index.d.ts +134 -0
- package/dist/index.js +1 -0
- package/dist/registered.js +1 -0
- package/package.json +91 -0
package/demo/api.md
ADDED
|
@@ -0,0 +1,787 @@
|
|
|
1
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/api.md) -->
|
|
2
|
+
<!-- The below content is automatically added from ./../docs/api.md -->
|
|
3
|
+
|
|
4
|
+
# auro-slideshow
|
|
5
|
+
|
|
6
|
+
### Properties & Attributes
|
|
7
|
+
|
|
8
|
+
| Properties | Attributes | Type | Default | Description |
|
|
9
|
+
| ----------- | ----------- | ------- | ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
10
|
+
| autoplay | autoplay | boolean | false | If true, the slideshow will play automatically. |
|
|
11
|
+
| autoScroll | autoScroll | boolean | false | If true, the slideshow will scroll continuously. |
|
|
12
|
+
| delay | delay | number | 7000 | Slide duration in milliseconds. (Only used with `autoplay`) |
|
|
13
|
+
| fullBleed | fullBleed | boolean | false | If set, the slideshow will take up the width of its parent container showing previous and next slides. **Note:** a parent container must have `overflow-x: hidden` to prevent horizontal scrolling. |
|
|
14
|
+
| loop | loop | boolean | false | If true, the slideshow will loop back to the first slide after reaching the last slide. |
|
|
15
|
+
| navigation | navigation | boolean | false | If true, the slideshow will display navigation arrows for previous and next slides when the slide container is hovered. |
|
|
16
|
+
| pagination | pagination | boolean | false | If true, the slideshow will display pagination dots for each slide. If autoplay is on, the active dot will also show a progress bar. |
|
|
17
|
+
| pauseLabel | pauseLabel | string | "Pause slideshow" | The aria-label for the pause button. |
|
|
18
|
+
| playLabel | playLabel | string | "Play slideshow" | The aria-label for the play button. |
|
|
19
|
+
| playOnInit | playOnInit | boolean | false | If true, the slideshow will start playing automatically on page load when `autoplay` or `autoScroll` are on. |
|
|
20
|
+
| scrollSpeed | scrollSpeed | number | 0.75 | Number of pixels auto scroll should advance per frame. (Only used with `autoScroll`) |
|
|
21
|
+
| startDelay | startDelay | number | 1000 | Delay in milliseconds before the auto scroll starts. (Only used with `autoScroll`) |
|
|
22
|
+
|
|
23
|
+
### Methods
|
|
24
|
+
|
|
25
|
+
| Name | Parameters | Return | Description |
|
|
26
|
+
| ---------- | -------------------------------------------------- | --------------- | ---------------------------------------------- |
|
|
27
|
+
| play | None | [object Object] | Starts the slideshow playback. |
|
|
28
|
+
| register | `name` (string) - Custom element name to register. | | Registers the custom element with the browser. |
|
|
29
|
+
| scrollNext | None | [object Object] | Scrolls to the next slide. |
|
|
30
|
+
| scrollPrev | None | [object Object] | Scrolls to the previous slide. |
|
|
31
|
+
| stop | None | [object Object] | Stops the slideshow playback. |
|
|
32
|
+
|
|
33
|
+
### Slots
|
|
34
|
+
|
|
35
|
+
| Name | Description |
|
|
36
|
+
| --------- | --------------------------------------------------------------------------- |
|
|
37
|
+
| (default) | Default slot for the slides. Each child element will be treated as a slide. |
|
|
38
|
+
|
|
39
|
+
### CSS Shadow Parts
|
|
40
|
+
|
|
41
|
+
| Name | Description |
|
|
42
|
+
| ----------------- | ------------------------------------------- |
|
|
43
|
+
| next-button | Use to style the next button control. |
|
|
44
|
+
| play-pause-button | Use to style the play/pause button control. |
|
|
45
|
+
| prev-button | Use to style the previous button control. |
|
|
46
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
47
|
+
|
|
48
|
+
## API Examples
|
|
49
|
+
|
|
50
|
+
### Basic
|
|
51
|
+
|
|
52
|
+
This is the slideshow with no features turned on. It can only be navigated by dragging/swiping or with the keyboard by tabbing to the slide and using the left/right arrow keys.
|
|
53
|
+
|
|
54
|
+
<div class="exampleWrapper">
|
|
55
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
|
|
56
|
+
<!-- The below content is automatically added from ./../apiExamples/basic.html -->
|
|
57
|
+
<auro-slideshow>
|
|
58
|
+
<div style="height: 480px">
|
|
59
|
+
<img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=1" alt="Random image 1">
|
|
60
|
+
</div>
|
|
61
|
+
<div style="height: 480px">
|
|
62
|
+
<img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=2" alt="Random image 2">
|
|
63
|
+
</div>
|
|
64
|
+
<div style="height: 480px">
|
|
65
|
+
<img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=3" alt="Random image 3">
|
|
66
|
+
</div>
|
|
67
|
+
<div style="height: 480px">
|
|
68
|
+
<img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=4" alt="Random image 4">
|
|
69
|
+
</div>
|
|
70
|
+
<div style="height: 480px">
|
|
71
|
+
<img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=5" alt="Random image 5">
|
|
72
|
+
</div>
|
|
73
|
+
</auro-slideshow>
|
|
74
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
75
|
+
</div>
|
|
76
|
+
<auro-accordion alignRight>
|
|
77
|
+
<span slot="trigger">See code</span>
|
|
78
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
|
|
79
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
|
|
80
|
+
|
|
81
|
+
```html
|
|
82
|
+
<auro-slideshow>
|
|
83
|
+
<div style="height: 480px">
|
|
84
|
+
<img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=1" alt="Random image 1">
|
|
85
|
+
</div>
|
|
86
|
+
<div style="height: 480px">
|
|
87
|
+
<img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=2" alt="Random image 2">
|
|
88
|
+
</div>
|
|
89
|
+
<div style="height: 480px">
|
|
90
|
+
<img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=3" alt="Random image 3">
|
|
91
|
+
</div>
|
|
92
|
+
<div style="height: 480px">
|
|
93
|
+
<img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=4" alt="Random image 4">
|
|
94
|
+
</div>
|
|
95
|
+
<div style="height: 480px">
|
|
96
|
+
<img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=5" alt="Random image 5">
|
|
97
|
+
</div>
|
|
98
|
+
</auro-slideshow>
|
|
99
|
+
```
|
|
100
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
101
|
+
</auro-accordion>
|
|
102
|
+
|
|
103
|
+
### Navigation
|
|
104
|
+
|
|
105
|
+
Setting the `navigation` attribute will render previous/next arrow controls to allow the user to manually navigate the slideshow. These controls will only appear when the slides are hovered.
|
|
106
|
+
|
|
107
|
+
If `loop` is off, the respective arrow control will be disabled/hidden when the slideshow is at the beginning or the end.
|
|
108
|
+
|
|
109
|
+
`navigation` controls are disabled on mobile devices.
|
|
110
|
+
|
|
111
|
+
<div class="exampleWrapper">
|
|
112
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/navigation.html) -->
|
|
113
|
+
<!-- The below content is automatically added from ./../apiExamples/navigation.html -->
|
|
114
|
+
<auro-slideshow navigation>
|
|
115
|
+
<div style="height: 480px">
|
|
116
|
+
<img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=1" alt="Random image 1">
|
|
117
|
+
</div>
|
|
118
|
+
<div style="height: 480px">
|
|
119
|
+
<img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=2" alt="Random image 2">
|
|
120
|
+
</div>
|
|
121
|
+
<div style="height: 480px">
|
|
122
|
+
<img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=3" alt="Random image 3">
|
|
123
|
+
</div>
|
|
124
|
+
<div style="height: 480px">
|
|
125
|
+
<img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=4" alt="Random image 4">
|
|
126
|
+
</div>
|
|
127
|
+
<div style="height: 480px">
|
|
128
|
+
<img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=5" alt="Random image 5">
|
|
129
|
+
</div>
|
|
130
|
+
</auro-slideshow>
|
|
131
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
132
|
+
</div>
|
|
133
|
+
<auro-accordion alignRight>
|
|
134
|
+
<span slot="trigger">See code</span>
|
|
135
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/navigation.html) -->
|
|
136
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/navigation.html -->
|
|
137
|
+
|
|
138
|
+
```html
|
|
139
|
+
<auro-slideshow navigation>
|
|
140
|
+
<div style="height: 480px">
|
|
141
|
+
<img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=1" alt="Random image 1">
|
|
142
|
+
</div>
|
|
143
|
+
<div style="height: 480px">
|
|
144
|
+
<img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=2" alt="Random image 2">
|
|
145
|
+
</div>
|
|
146
|
+
<div style="height: 480px">
|
|
147
|
+
<img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=3" alt="Random image 3">
|
|
148
|
+
</div>
|
|
149
|
+
<div style="height: 480px">
|
|
150
|
+
<img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=4" alt="Random image 4">
|
|
151
|
+
</div>
|
|
152
|
+
<div style="height: 480px">
|
|
153
|
+
<img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=5" alt="Random image 5">
|
|
154
|
+
</div>
|
|
155
|
+
</auro-slideshow>
|
|
156
|
+
```
|
|
157
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
158
|
+
</auro-accordion>
|
|
159
|
+
|
|
160
|
+
### Pagination
|
|
161
|
+
|
|
162
|
+
Setting the `pagination` attribute will render pagination dots to indicate the number of slides. The current slide dot is represented by a filled wide dot to match the look of the progress bar.
|
|
163
|
+
|
|
164
|
+
<div class="exampleWrapper">
|
|
165
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/pagination.html) -->
|
|
166
|
+
<!-- The below content is automatically added from ./../apiExamples/pagination.html -->
|
|
167
|
+
<auro-slideshow pagination>
|
|
168
|
+
<div style="height: 480px">
|
|
169
|
+
<img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=1" alt="Random image 1">
|
|
170
|
+
</div>
|
|
171
|
+
<div style="height: 480px">
|
|
172
|
+
<img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=2" alt="Random image 2">
|
|
173
|
+
</div>
|
|
174
|
+
<div style="height: 480px">
|
|
175
|
+
<img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=3" alt="Random image 3">
|
|
176
|
+
</div>
|
|
177
|
+
<div style="height: 480px">
|
|
178
|
+
<img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=4" alt="Random image 4">
|
|
179
|
+
</div>
|
|
180
|
+
<div style="height: 480px">
|
|
181
|
+
<img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=5" alt="Random image 5">
|
|
182
|
+
</div>
|
|
183
|
+
</auro-slideshow>
|
|
184
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
185
|
+
</div>
|
|
186
|
+
<auro-accordion alignRight>
|
|
187
|
+
<span slot="trigger">See code</span>
|
|
188
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/pagination.html) -->
|
|
189
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/pagination.html -->
|
|
190
|
+
|
|
191
|
+
```html
|
|
192
|
+
<auro-slideshow pagination>
|
|
193
|
+
<div style="height: 480px">
|
|
194
|
+
<img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=1" alt="Random image 1">
|
|
195
|
+
</div>
|
|
196
|
+
<div style="height: 480px">
|
|
197
|
+
<img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=2" alt="Random image 2">
|
|
198
|
+
</div>
|
|
199
|
+
<div style="height: 480px">
|
|
200
|
+
<img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=3" alt="Random image 3">
|
|
201
|
+
</div>
|
|
202
|
+
<div style="height: 480px">
|
|
203
|
+
<img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=4" alt="Random image 4">
|
|
204
|
+
</div>
|
|
205
|
+
<div style="height: 480px">
|
|
206
|
+
<img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=5" alt="Random image 5">
|
|
207
|
+
</div>
|
|
208
|
+
</auro-slideshow>
|
|
209
|
+
```
|
|
210
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
211
|
+
</auro-accordion>
|
|
212
|
+
|
|
213
|
+
### Loop
|
|
214
|
+
|
|
215
|
+
If the `loop` attribute is on, the slideshow will go back to the first slide when it reaches the end. If `autoplay` or `autoScroll` is on and `loop` is off, the slideshow will stop on the last slide.
|
|
216
|
+
|
|
217
|
+
<div class="exampleWrapper">
|
|
218
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/loop.html) -->
|
|
219
|
+
<!-- The below content is automatically added from ./../apiExamples/loop.html -->
|
|
220
|
+
<auro-slideshow pagination navigation loop>
|
|
221
|
+
<div style="height: 480px">
|
|
222
|
+
<img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=1" alt="Random image 1">
|
|
223
|
+
</div>
|
|
224
|
+
<div style="height: 480px">
|
|
225
|
+
<img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=2" alt="Random image 2">
|
|
226
|
+
</div>
|
|
227
|
+
<div style="height: 480px">
|
|
228
|
+
<img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=3" alt="Random image 3">
|
|
229
|
+
</div>
|
|
230
|
+
<div style="height: 480px">
|
|
231
|
+
<img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=4" alt="Random image 4">
|
|
232
|
+
</div>
|
|
233
|
+
<div style="height: 480px">
|
|
234
|
+
<img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=5" alt="Random image 5">
|
|
235
|
+
</div>
|
|
236
|
+
</auro-slideshow>
|
|
237
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
238
|
+
</div>
|
|
239
|
+
<auro-accordion alignRight>
|
|
240
|
+
<span slot="trigger">See code</span>
|
|
241
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/loop.html) -->
|
|
242
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/loop.html -->
|
|
243
|
+
|
|
244
|
+
```html
|
|
245
|
+
<auro-slideshow pagination navigation loop>
|
|
246
|
+
<div style="height: 480px">
|
|
247
|
+
<img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=1" alt="Random image 1">
|
|
248
|
+
</div>
|
|
249
|
+
<div style="height: 480px">
|
|
250
|
+
<img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=2" alt="Random image 2">
|
|
251
|
+
</div>
|
|
252
|
+
<div style="height: 480px">
|
|
253
|
+
<img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=3" alt="Random image 3">
|
|
254
|
+
</div>
|
|
255
|
+
<div style="height: 480px">
|
|
256
|
+
<img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=4" alt="Random image 4">
|
|
257
|
+
</div>
|
|
258
|
+
<div style="height: 480px">
|
|
259
|
+
<img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=5" alt="Random image 5">
|
|
260
|
+
</div>
|
|
261
|
+
</auro-slideshow>
|
|
262
|
+
```
|
|
263
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
264
|
+
</auro-accordion>
|
|
265
|
+
|
|
266
|
+
### Autoplay
|
|
267
|
+
|
|
268
|
+
Setting the `autoplay` attribute will render the play button so users can stop or start the slideshow. Adding the `pagination` attribute will render pagination dots with an animated progress bar in place of the current slide dot showing the time until the next slide. When stopped, the progress bar will be filled. Playing will stop if any of the controls are clicked or a slide is hovered/receives focus.
|
|
269
|
+
|
|
270
|
+
<div class="exampleWrapper">
|
|
271
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/autoplay.html) -->
|
|
272
|
+
<!-- The below content is automatically added from ./../apiExamples/autoplay.html -->
|
|
273
|
+
<auro-slideshow pagination autoplay playOnInit loop>
|
|
274
|
+
<div style="height: 480px">
|
|
275
|
+
<img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=1" alt="Random image 1">
|
|
276
|
+
</div>
|
|
277
|
+
<div style="height: 480px">
|
|
278
|
+
<img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=2" alt="Random image 2">
|
|
279
|
+
</div>
|
|
280
|
+
<div style="height: 480px">
|
|
281
|
+
<img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=3" alt="Random image 3">
|
|
282
|
+
</div>
|
|
283
|
+
<div style="height: 480px">
|
|
284
|
+
<img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=4" alt="Random image 4">
|
|
285
|
+
</div>
|
|
286
|
+
<div style="height: 480px">
|
|
287
|
+
<img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=5" alt="Random image 5">
|
|
288
|
+
</div>
|
|
289
|
+
</auro-slideshow>
|
|
290
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
291
|
+
</div>
|
|
292
|
+
<auro-accordion alignRight>
|
|
293
|
+
<span slot="trigger">See code</span>
|
|
294
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/autoplay.html) -->
|
|
295
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/autoplay.html -->
|
|
296
|
+
|
|
297
|
+
```html
|
|
298
|
+
<auro-slideshow pagination autoplay playOnInit loop>
|
|
299
|
+
<div style="height: 480px">
|
|
300
|
+
<img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=1" alt="Random image 1">
|
|
301
|
+
</div>
|
|
302
|
+
<div style="height: 480px">
|
|
303
|
+
<img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=2" alt="Random image 2">
|
|
304
|
+
</div>
|
|
305
|
+
<div style="height: 480px">
|
|
306
|
+
<img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=3" alt="Random image 3">
|
|
307
|
+
</div>
|
|
308
|
+
<div style="height: 480px">
|
|
309
|
+
<img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=4" alt="Random image 4">
|
|
310
|
+
</div>
|
|
311
|
+
<div style="height: 480px">
|
|
312
|
+
<img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=5" alt="Random image 5">
|
|
313
|
+
</div>
|
|
314
|
+
</auro-slideshow>
|
|
315
|
+
```
|
|
316
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
317
|
+
</auro-accordion>
|
|
318
|
+
|
|
319
|
+
### Delay
|
|
320
|
+
|
|
321
|
+
To set a custom slide duration on an `autoplay` slideshow, use the `delay` attribute to pass in a new value in milliseconds. The default value is 7000. This will show each slide for 7 seconds before moving to the next slide.
|
|
322
|
+
|
|
323
|
+
<div class="exampleWrapper">
|
|
324
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/delay.html) -->
|
|
325
|
+
<!-- The below content is automatically added from ./../apiExamples/delay.html -->
|
|
326
|
+
<auro-slideshow pagination autoplay delay="2000">
|
|
327
|
+
<div style="height: 480px">
|
|
328
|
+
<img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=1" alt="Random image 1">
|
|
329
|
+
</div>
|
|
330
|
+
<div style="height: 480px">
|
|
331
|
+
<img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=2" alt="Random image 2">
|
|
332
|
+
</div>
|
|
333
|
+
<div style="height: 480px">
|
|
334
|
+
<img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=3" alt="Random image 3">
|
|
335
|
+
</div>
|
|
336
|
+
<div style="height: 480px">
|
|
337
|
+
<img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=4" alt="Random image 4">
|
|
338
|
+
</div>
|
|
339
|
+
<div style="height: 480px">
|
|
340
|
+
<img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=5" alt="Random image 5">
|
|
341
|
+
</div>
|
|
342
|
+
</auro-slideshow>
|
|
343
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
344
|
+
</div>
|
|
345
|
+
<auro-accordion alignRight>
|
|
346
|
+
<span slot="trigger">See code</span>
|
|
347
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/delay.html) -->
|
|
348
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/delay.html -->
|
|
349
|
+
|
|
350
|
+
```html
|
|
351
|
+
<auro-slideshow pagination autoplay delay="2000">
|
|
352
|
+
<div style="height: 480px">
|
|
353
|
+
<img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=1" alt="Random image 1">
|
|
354
|
+
</div>
|
|
355
|
+
<div style="height: 480px">
|
|
356
|
+
<img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=2" alt="Random image 2">
|
|
357
|
+
</div>
|
|
358
|
+
<div style="height: 480px">
|
|
359
|
+
<img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=3" alt="Random image 3">
|
|
360
|
+
</div>
|
|
361
|
+
<div style="height: 480px">
|
|
362
|
+
<img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=4" alt="Random image 4">
|
|
363
|
+
</div>
|
|
364
|
+
<div style="height: 480px">
|
|
365
|
+
<img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=5" alt="Random image 5">
|
|
366
|
+
</div>
|
|
367
|
+
</auro-slideshow>
|
|
368
|
+
```
|
|
369
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
370
|
+
</auro-accordion>
|
|
371
|
+
|
|
372
|
+
### AutoScroll
|
|
373
|
+
|
|
374
|
+
Setting the `autoScroll` attribute will also render the play button, but unlike `autoplay`, the slideshow will not stop on each slide. Instead, it will scroll continuously at a set pace and only stop on hover/focus or if any controls are clicked.
|
|
375
|
+
|
|
376
|
+
`pagination` and `navigation` controls will not work unless the slideshow is stopped.
|
|
377
|
+
|
|
378
|
+
`autoScroll` is disabled on mobile devices.
|
|
379
|
+
|
|
380
|
+
<div class="exampleWrapper">
|
|
381
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/autoscroll.html) -->
|
|
382
|
+
<!-- The below content is automatically added from ./../apiExamples/autoscroll.html -->
|
|
383
|
+
<auro-slideshow navigation autoScroll playOnInit loop>
|
|
384
|
+
<div style="height: 480px; max-width: 400px;">
|
|
385
|
+
<img style="object-fit: cover;" src="https://picsum.photos/400/480?random=1" alt="Random image 1">
|
|
386
|
+
</div>
|
|
387
|
+
<div style="height: 480px; max-width: 400px;">
|
|
388
|
+
<img style="object-fit: cover;" src="https://picsum.photos/400/480?random=2" alt="Random image 2">
|
|
389
|
+
</div>
|
|
390
|
+
<div style="height: 480px; max-width: 400px;">
|
|
391
|
+
<img style="object-fit: cover;" src="https://picsum.photos/400/480?random=3" alt="Random image 3">
|
|
392
|
+
</div>
|
|
393
|
+
<div style="height: 480px; max-width: 400px;">
|
|
394
|
+
<img style="object-fit: cover;" src="https://picsum.photos/400/480?random=4" alt="Random image 4">
|
|
395
|
+
</div>
|
|
396
|
+
<div style="height: 480px; max-width: 400px;">
|
|
397
|
+
<img style="object-fit: cover;" src="https://picsum.photos/400/480?random=5" alt="Random image 5">
|
|
398
|
+
</div>
|
|
399
|
+
</auro-slideshow>
|
|
400
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
401
|
+
</div>
|
|
402
|
+
<auro-accordion alignRight>
|
|
403
|
+
<span slot="trigger">See code</span>
|
|
404
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/autoscroll.html) -->
|
|
405
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/autoscroll.html -->
|
|
406
|
+
|
|
407
|
+
```html
|
|
408
|
+
<auro-slideshow navigation autoScroll playOnInit loop>
|
|
409
|
+
<div style="height: 480px; max-width: 400px;">
|
|
410
|
+
<img style="object-fit: cover;" src="https://picsum.photos/400/480?random=1" alt="Random image 1">
|
|
411
|
+
</div>
|
|
412
|
+
<div style="height: 480px; max-width: 400px;">
|
|
413
|
+
<img style="object-fit: cover;" src="https://picsum.photos/400/480?random=2" alt="Random image 2">
|
|
414
|
+
</div>
|
|
415
|
+
<div style="height: 480px; max-width: 400px;">
|
|
416
|
+
<img style="object-fit: cover;" src="https://picsum.photos/400/480?random=3" alt="Random image 3">
|
|
417
|
+
</div>
|
|
418
|
+
<div style="height: 480px; max-width: 400px;">
|
|
419
|
+
<img style="object-fit: cover;" src="https://picsum.photos/400/480?random=4" alt="Random image 4">
|
|
420
|
+
</div>
|
|
421
|
+
<div style="height: 480px; max-width: 400px;">
|
|
422
|
+
<img style="object-fit: cover;" src="https://picsum.photos/400/480?random=5" alt="Random image 5">
|
|
423
|
+
</div>
|
|
424
|
+
</auro-slideshow>
|
|
425
|
+
```
|
|
426
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
427
|
+
</auro-accordion>
|
|
428
|
+
|
|
429
|
+
### ScrollSpeed
|
|
430
|
+
|
|
431
|
+
To set a custom speed on an `autoScroll` slideshow, use the `scrollSpeed` attribute to pass in a new value in pixels per frame. The default value is 0.75. To make the slideshow scroll faster, use a higher number. The value does not need to be whole number.
|
|
432
|
+
|
|
433
|
+
<div class="exampleWrapper">
|
|
434
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/scrollspeed.html) -->
|
|
435
|
+
<!-- The below content is automatically added from ./../apiExamples/scrollspeed.html -->
|
|
436
|
+
<auro-slideshow navigation autoScroll scrollSpeed="2.88" loop>
|
|
437
|
+
<div style="height: 480px; max-width: 400px;">
|
|
438
|
+
<img style="object-fit: cover;" src="https://picsum.photos/400/480?random=1" alt="Random image 1">
|
|
439
|
+
</div>
|
|
440
|
+
<div style="height: 480px; max-width: 400px;">
|
|
441
|
+
<img style="object-fit: cover;" src="https://picsum.photos/400/480?random=2" alt="Random image 2">
|
|
442
|
+
</div>
|
|
443
|
+
<div style="height: 480px; max-width: 400px;">
|
|
444
|
+
<img style="object-fit: cover;" src="https://picsum.photos/400/480?random=3" alt="Random image 3">
|
|
445
|
+
</div>
|
|
446
|
+
<div style="height: 480px; max-width: 400px;">
|
|
447
|
+
<img style="object-fit: cover;" src="https://picsum.photos/400/480?random=4" alt="Random image 4">
|
|
448
|
+
</div>
|
|
449
|
+
<div style="height: 480px; max-width: 400px;">
|
|
450
|
+
<img style="object-fit: cover;" src="https://picsum.photos/400/480?random=5" alt="Random image 5">
|
|
451
|
+
</div>
|
|
452
|
+
</auro-slideshow>
|
|
453
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
454
|
+
</div>
|
|
455
|
+
<auro-accordion alignRight>
|
|
456
|
+
<span slot="trigger">See code</span>
|
|
457
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/scrollspeed.html) -->
|
|
458
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/scrollspeed.html -->
|
|
459
|
+
|
|
460
|
+
```html
|
|
461
|
+
<auro-slideshow navigation autoScroll scrollSpeed="2.88" loop>
|
|
462
|
+
<div style="height: 480px; max-width: 400px;">
|
|
463
|
+
<img style="object-fit: cover;" src="https://picsum.photos/400/480?random=1" alt="Random image 1">
|
|
464
|
+
</div>
|
|
465
|
+
<div style="height: 480px; max-width: 400px;">
|
|
466
|
+
<img style="object-fit: cover;" src="https://picsum.photos/400/480?random=2" alt="Random image 2">
|
|
467
|
+
</div>
|
|
468
|
+
<div style="height: 480px; max-width: 400px;">
|
|
469
|
+
<img style="object-fit: cover;" src="https://picsum.photos/400/480?random=3" alt="Random image 3">
|
|
470
|
+
</div>
|
|
471
|
+
<div style="height: 480px; max-width: 400px;">
|
|
472
|
+
<img style="object-fit: cover;" src="https://picsum.photos/400/480?random=4" alt="Random image 4">
|
|
473
|
+
</div>
|
|
474
|
+
<div style="height: 480px; max-width: 400px;">
|
|
475
|
+
<img style="object-fit: cover;" src="https://picsum.photos/400/480?random=5" alt="Random image 5">
|
|
476
|
+
</div>
|
|
477
|
+
</auro-slideshow>
|
|
478
|
+
```
|
|
479
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
480
|
+
</auro-accordion>
|
|
481
|
+
|
|
482
|
+
### StartDelay
|
|
483
|
+
|
|
484
|
+
To set a custom delay before the `autoScroll` restarts, use the `startDelay` attribute to pass in a new value in milliseconds. The default value is 1000. This will cause the slideshow to wait 1 second before it resumes autoscrolling.
|
|
485
|
+
|
|
486
|
+
<div class="exampleWrapper">
|
|
487
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/startdelay.html) -->
|
|
488
|
+
<!-- The below content is automatically added from ./../apiExamples/startdelay.html -->
|
|
489
|
+
<auro-slideshow navigation autoScroll startDelay="200" loop>
|
|
490
|
+
<div style="height: 480px; max-width: 400px;">
|
|
491
|
+
<img style="object-fit: cover;" src="https://picsum.photos/400/480?random=1" alt="Random image 1">
|
|
492
|
+
</div>
|
|
493
|
+
<div style="height: 480px; max-width: 400px;">
|
|
494
|
+
<img style="object-fit: cover;" src="https://picsum.photos/400/480?random=2" alt="Random image 2">
|
|
495
|
+
</div>
|
|
496
|
+
<div style="height: 480px; max-width: 400px;">
|
|
497
|
+
<img style="object-fit: cover;" src="https://picsum.photos/400/480?random=3" alt="Random image 3">
|
|
498
|
+
</div>
|
|
499
|
+
<div style="height: 480px; max-width: 400px;">
|
|
500
|
+
<img style="object-fit: cover;" src="https://picsum.photos/400/480?random=4" alt="Random image 4">
|
|
501
|
+
</div>
|
|
502
|
+
<div style="height: 480px; max-width: 400px;">
|
|
503
|
+
<img style="object-fit: cover;" src="https://picsum.photos/400/480?random=5" alt="Random image 5">
|
|
504
|
+
</div>
|
|
505
|
+
</auro-slideshow>
|
|
506
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
507
|
+
</div>
|
|
508
|
+
<auro-accordion alignRight>
|
|
509
|
+
<span slot="trigger">See code</span>
|
|
510
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/startdelay.html) -->
|
|
511
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/startdelay.html -->
|
|
512
|
+
|
|
513
|
+
```html
|
|
514
|
+
<auro-slideshow navigation autoScroll startDelay="200" loop>
|
|
515
|
+
<div style="height: 480px; max-width: 400px;">
|
|
516
|
+
<img style="object-fit: cover;" src="https://picsum.photos/400/480?random=1" alt="Random image 1">
|
|
517
|
+
</div>
|
|
518
|
+
<div style="height: 480px; max-width: 400px;">
|
|
519
|
+
<img style="object-fit: cover;" src="https://picsum.photos/400/480?random=2" alt="Random image 2">
|
|
520
|
+
</div>
|
|
521
|
+
<div style="height: 480px; max-width: 400px;">
|
|
522
|
+
<img style="object-fit: cover;" src="https://picsum.photos/400/480?random=3" alt="Random image 3">
|
|
523
|
+
</div>
|
|
524
|
+
<div style="height: 480px; max-width: 400px;">
|
|
525
|
+
<img style="object-fit: cover;" src="https://picsum.photos/400/480?random=4" alt="Random image 4">
|
|
526
|
+
</div>
|
|
527
|
+
<div style="height: 480px; max-width: 400px;">
|
|
528
|
+
<img style="object-fit: cover;" src="https://picsum.photos/400/480?random=5" alt="Random image 5">
|
|
529
|
+
</div>
|
|
530
|
+
</auro-slideshow>
|
|
531
|
+
```
|
|
532
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
533
|
+
</auro-accordion>
|
|
534
|
+
|
|
535
|
+
### PlayOnInit
|
|
536
|
+
|
|
537
|
+
Setting the `playOnInit` attribute will start playing the slideshow when the page loads if either `autoplay` or `autoScroll` are enabled. Otherwise, the slideshow will not start playing until the user clicks the play button or the `play()` method is called.
|
|
538
|
+
|
|
539
|
+
<div class="exampleWrapper">
|
|
540
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/playoninit.html) -->
|
|
541
|
+
<!-- The below content is automatically added from ./../apiExamples/playoninit.html -->
|
|
542
|
+
<auro-slideshow autoScroll playOnInit loop>
|
|
543
|
+
<div style="height: 480px; max-width: 400px;">
|
|
544
|
+
<img style="object-fit: cover;" src="https://picsum.photos/400/480?random=1" alt="Random image 1">
|
|
545
|
+
</div>
|
|
546
|
+
<div style="height: 480px; max-width: 400px;">
|
|
547
|
+
<img style="object-fit: cover;" src="https://picsum.photos/400/480?random=2" alt="Random image 2">
|
|
548
|
+
</div>
|
|
549
|
+
<div style="height: 480px; max-width: 400px;">
|
|
550
|
+
<img style="object-fit: cover;" src="https://picsum.photos/400/480?random=3" alt="Random image 3">
|
|
551
|
+
</div>
|
|
552
|
+
<div style="height: 480px; max-width: 400px;">
|
|
553
|
+
<img style="object-fit: cover;" src="https://picsum.photos/400/480?random=4" alt="Random image 4">
|
|
554
|
+
</div>
|
|
555
|
+
<div style="height: 480px; max-width: 400px;">
|
|
556
|
+
<img style="object-fit: cover;" src="https://picsum.photos/400/480?random=5" alt="Random image 5">
|
|
557
|
+
</div>
|
|
558
|
+
</auro-slideshow>
|
|
559
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
560
|
+
</div>
|
|
561
|
+
<auro-accordion alignRight>
|
|
562
|
+
<span slot="trigger">See code</span>
|
|
563
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/playoninit.html) -->
|
|
564
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/playoninit.html -->
|
|
565
|
+
|
|
566
|
+
```html
|
|
567
|
+
<auro-slideshow autoScroll playOnInit loop>
|
|
568
|
+
<div style="height: 480px; max-width: 400px;">
|
|
569
|
+
<img style="object-fit: cover;" src="https://picsum.photos/400/480?random=1" alt="Random image 1">
|
|
570
|
+
</div>
|
|
571
|
+
<div style="height: 480px; max-width: 400px;">
|
|
572
|
+
<img style="object-fit: cover;" src="https://picsum.photos/400/480?random=2" alt="Random image 2">
|
|
573
|
+
</div>
|
|
574
|
+
<div style="height: 480px; max-width: 400px;">
|
|
575
|
+
<img style="object-fit: cover;" src="https://picsum.photos/400/480?random=3" alt="Random image 3">
|
|
576
|
+
</div>
|
|
577
|
+
<div style="height: 480px; max-width: 400px;">
|
|
578
|
+
<img style="object-fit: cover;" src="https://picsum.photos/400/480?random=4" alt="Random image 4">
|
|
579
|
+
</div>
|
|
580
|
+
<div style="height: 480px; max-width: 400px;">
|
|
581
|
+
<img style="object-fit: cover;" src="https://picsum.photos/400/480?random=5" alt="Random image 5">
|
|
582
|
+
</div>
|
|
583
|
+
</auro-slideshow>
|
|
584
|
+
```
|
|
585
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
586
|
+
</auro-accordion>
|
|
587
|
+
|
|
588
|
+
### Custom labels for Play/Pause button
|
|
589
|
+
|
|
590
|
+
To set a custom aria-label for the play/pause button, pass in new values to the `playLabel` and `pauseLabel` attributes respectively. If not provided, they will default to "Play slideshow" and "Pause slideshow".
|
|
591
|
+
|
|
592
|
+
<div class="exampleWrapper">
|
|
593
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/customlabels.html) -->
|
|
594
|
+
<!-- The below content is automatically added from ./../apiExamples/customlabels.html -->
|
|
595
|
+
<auro-slideshow pagination autoplay playLabel="Reproducir diapositivas" pauseLabel="Pausar diapositivas">
|
|
596
|
+
<div style="height: 480px">
|
|
597
|
+
<img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=1" alt="Random image 1">
|
|
598
|
+
</div>
|
|
599
|
+
<div style="height: 480px">
|
|
600
|
+
<img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=2" alt="Random image 2">
|
|
601
|
+
</div>
|
|
602
|
+
<div style="height: 480px">
|
|
603
|
+
<img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=3" alt="Random image 3">
|
|
604
|
+
</div>
|
|
605
|
+
<div style="height: 480px">
|
|
606
|
+
<img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=4" alt="Random image 4">
|
|
607
|
+
</div>
|
|
608
|
+
<div style="height: 480px">
|
|
609
|
+
<img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=5" alt="Random image 5">
|
|
610
|
+
</div>
|
|
611
|
+
</auro-slideshow>
|
|
612
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
613
|
+
</div>
|
|
614
|
+
<auro-accordion alignRight>
|
|
615
|
+
<span slot="trigger">See code</span>
|
|
616
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/customlabels.html) -->
|
|
617
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/customlabels.html -->
|
|
618
|
+
|
|
619
|
+
```html
|
|
620
|
+
<auro-slideshow pagination autoplay playLabel="Reproducir diapositivas" pauseLabel="Pausar diapositivas">
|
|
621
|
+
<div style="height: 480px">
|
|
622
|
+
<img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=1" alt="Random image 1">
|
|
623
|
+
</div>
|
|
624
|
+
<div style="height: 480px">
|
|
625
|
+
<img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=2" alt="Random image 2">
|
|
626
|
+
</div>
|
|
627
|
+
<div style="height: 480px">
|
|
628
|
+
<img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=3" alt="Random image 3">
|
|
629
|
+
</div>
|
|
630
|
+
<div style="height: 480px">
|
|
631
|
+
<img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=4" alt="Random image 4">
|
|
632
|
+
</div>
|
|
633
|
+
<div style="height: 480px">
|
|
634
|
+
<img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=5" alt="Random image 5">
|
|
635
|
+
</div>
|
|
636
|
+
</auro-slideshow>
|
|
637
|
+
```
|
|
638
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
639
|
+
</auro-accordion>
|
|
640
|
+
|
|
641
|
+
### Full-Bleed Preview
|
|
642
|
+
|
|
643
|
+
To enable the slideshow to show a preview of the previous and next slides, use the `fullBleed` attribute. This will unhide the overflow of the view area.
|
|
644
|
+
|
|
645
|
+
**Note:** To use this properly, a parent container MUST have `overflow-x: hidden` to prevent horizontal scrolling on the page. It is not recommended to put `overflow-x: hidden` on the `<body>` element as this will prevent horizontal scrolling if fixed-width elements become wider than the page. This is only done for demo purposes.
|
|
646
|
+
|
|
647
|
+
<div class="exampleWrapper">
|
|
648
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/fullBleed.html) -->
|
|
649
|
+
<!-- The below content is automatically added from ./../apiExamples/fullBleed.html -->
|
|
650
|
+
<auro-slideshow fullBleed autoplay pagination navigation loop>
|
|
651
|
+
<div style="height: 480px">
|
|
652
|
+
<img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=1" alt="Random image 1">
|
|
653
|
+
</div>
|
|
654
|
+
<div style="height: 480px">
|
|
655
|
+
<img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=2" alt="Random image 2">
|
|
656
|
+
</div>
|
|
657
|
+
<div style="height: 480px">
|
|
658
|
+
<img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=3" alt="Random image 3">
|
|
659
|
+
</div>
|
|
660
|
+
<div style="height: 480px">
|
|
661
|
+
<img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=4" alt="Random image 4">
|
|
662
|
+
</div>
|
|
663
|
+
<div style="height: 480px">
|
|
664
|
+
<img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=5" alt="Random image 5">
|
|
665
|
+
</div>
|
|
666
|
+
</auro-slideshow>
|
|
667
|
+
<!-- For demo purposes only -->
|
|
668
|
+
<style>
|
|
669
|
+
body {
|
|
670
|
+
overflow-x: hidden;
|
|
671
|
+
}
|
|
672
|
+
</style>
|
|
673
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
674
|
+
</div>
|
|
675
|
+
<auro-accordion alignRight>
|
|
676
|
+
<span slot="trigger">See code</span>
|
|
677
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/fullBleed.html) -->
|
|
678
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/fullBleed.html -->
|
|
679
|
+
|
|
680
|
+
```html
|
|
681
|
+
<auro-slideshow fullBleed autoplay pagination navigation loop>
|
|
682
|
+
<div style="height: 480px">
|
|
683
|
+
<img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=1" alt="Random image 1">
|
|
684
|
+
</div>
|
|
685
|
+
<div style="height: 480px">
|
|
686
|
+
<img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=2" alt="Random image 2">
|
|
687
|
+
</div>
|
|
688
|
+
<div style="height: 480px">
|
|
689
|
+
<img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=3" alt="Random image 3">
|
|
690
|
+
</div>
|
|
691
|
+
<div style="height: 480px">
|
|
692
|
+
<img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=4" alt="Random image 4">
|
|
693
|
+
</div>
|
|
694
|
+
<div style="height: 480px">
|
|
695
|
+
<img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=5" alt="Random image 5">
|
|
696
|
+
</div>
|
|
697
|
+
</auro-slideshow>
|
|
698
|
+
<!-- For demo purposes only -->
|
|
699
|
+
<style>
|
|
700
|
+
body {
|
|
701
|
+
overflow-x: hidden;
|
|
702
|
+
}
|
|
703
|
+
</style>
|
|
704
|
+
```
|
|
705
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
706
|
+
</auro-accordion>
|
|
707
|
+
|
|
708
|
+
### Full-Bleed + AutoScroll Preview
|
|
709
|
+
|
|
710
|
+
<div class="exampleWrapper">
|
|
711
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/fullBleedAutoScroll.html) -->
|
|
712
|
+
<!-- The below content is automatically added from ./../apiExamples/fullBleedAutoScroll.html -->
|
|
713
|
+
<auro-slideshow fullBleed navigation autoScroll playOnInit loop>
|
|
714
|
+
<div style="height: 480px; max-width: 400px;">
|
|
715
|
+
<img style="object-fit: cover;" src="https://picsum.photos/400/480?random=1" alt="Random image 1">
|
|
716
|
+
</div>
|
|
717
|
+
<div style="height: 480px; max-width: 400px;">
|
|
718
|
+
<img style="object-fit: cover;" src="https://picsum.photos/400/480?random=2" alt="Random image 2">
|
|
719
|
+
</div>
|
|
720
|
+
<div style="height: 480px; max-width: 400px;">
|
|
721
|
+
<img style="object-fit: cover;" src="https://picsum.photos/400/480?random=3" alt="Random image 3">
|
|
722
|
+
</div>
|
|
723
|
+
<div style="height: 480px; max-width: 400px;">
|
|
724
|
+
<img style="object-fit: cover;" src="https://picsum.photos/400/480?random=4" alt="Random image 4">
|
|
725
|
+
</div>
|
|
726
|
+
<div style="height: 480px; max-width: 400px;">
|
|
727
|
+
<img style="object-fit: cover;" src="https://picsum.photos/400/480?random=5" alt="Random image 5">
|
|
728
|
+
</div>
|
|
729
|
+
<div style="height: 480px; max-width: 400px;">
|
|
730
|
+
<img style="object-fit: cover;" src="https://picsum.photos/400/480?random=6" alt="Random image 6">
|
|
731
|
+
</div>
|
|
732
|
+
<div style="height: 480px; max-width: 400px;">
|
|
733
|
+
<img style="object-fit: cover;" src="https://picsum.photos/400/480?random=7" alt="Random image 7">
|
|
734
|
+
</div>
|
|
735
|
+
<div style="height: 480px; max-width: 400px;">
|
|
736
|
+
<img style="object-fit: cover;" src="https://picsum.photos/400/480?random=8" alt="Random image 8">
|
|
737
|
+
</div>
|
|
738
|
+
</auro-slideshow>
|
|
739
|
+
<!-- For demo purposes only -->
|
|
740
|
+
<style>
|
|
741
|
+
body {
|
|
742
|
+
overflow-x: hidden;
|
|
743
|
+
}
|
|
744
|
+
</style>
|
|
745
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
746
|
+
</div>
|
|
747
|
+
<auro-accordion alignRight>
|
|
748
|
+
<span slot="trigger">See code</span>
|
|
749
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/fullBleedAutoScroll.html) -->
|
|
750
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/fullBleedAutoScroll.html -->
|
|
751
|
+
|
|
752
|
+
```html
|
|
753
|
+
<auro-slideshow fullBleed navigation autoScroll playOnInit loop>
|
|
754
|
+
<div style="height: 480px; max-width: 400px;">
|
|
755
|
+
<img style="object-fit: cover;" src="https://picsum.photos/400/480?random=1" alt="Random image 1">
|
|
756
|
+
</div>
|
|
757
|
+
<div style="height: 480px; max-width: 400px;">
|
|
758
|
+
<img style="object-fit: cover;" src="https://picsum.photos/400/480?random=2" alt="Random image 2">
|
|
759
|
+
</div>
|
|
760
|
+
<div style="height: 480px; max-width: 400px;">
|
|
761
|
+
<img style="object-fit: cover;" src="https://picsum.photos/400/480?random=3" alt="Random image 3">
|
|
762
|
+
</div>
|
|
763
|
+
<div style="height: 480px; max-width: 400px;">
|
|
764
|
+
<img style="object-fit: cover;" src="https://picsum.photos/400/480?random=4" alt="Random image 4">
|
|
765
|
+
</div>
|
|
766
|
+
<div style="height: 480px; max-width: 400px;">
|
|
767
|
+
<img style="object-fit: cover;" src="https://picsum.photos/400/480?random=5" alt="Random image 5">
|
|
768
|
+
</div>
|
|
769
|
+
<div style="height: 480px; max-width: 400px;">
|
|
770
|
+
<img style="object-fit: cover;" src="https://picsum.photos/400/480?random=6" alt="Random image 6">
|
|
771
|
+
</div>
|
|
772
|
+
<div style="height: 480px; max-width: 400px;">
|
|
773
|
+
<img style="object-fit: cover;" src="https://picsum.photos/400/480?random=7" alt="Random image 7">
|
|
774
|
+
</div>
|
|
775
|
+
<div style="height: 480px; max-width: 400px;">
|
|
776
|
+
<img style="object-fit: cover;" src="https://picsum.photos/400/480?random=8" alt="Random image 8">
|
|
777
|
+
</div>
|
|
778
|
+
</auro-slideshow>
|
|
779
|
+
<!-- For demo purposes only -->
|
|
780
|
+
<style>
|
|
781
|
+
body {
|
|
782
|
+
overflow-x: hidden;
|
|
783
|
+
}
|
|
784
|
+
</style>
|
|
785
|
+
```
|
|
786
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
787
|
+
</auro-accordion>
|