@aurodesignsystem-dev/auro-slideshow 0.0.0-pr21.0 → 0.0.0-pr22.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.
Files changed (11) hide show
  1. package/README.md +5 -3
  2. package/demo/api.html +1 -1
  3. package/demo/api.md +569 -6
  4. package/demo/auro-slideshow.min.js +279 -135
  5. package/demo/index.md +10 -8
  6. package/dist/auro-slideshow-CJw31Ppp.js +109 -0
  7. package/dist/index.d.ts +14 -6
  8. package/dist/index.js +1 -1
  9. package/dist/registered.js +1 -1
  10. package/package.json +10 -8
  11. package/dist/auro-slideshow-Cmdb_wIX.js +0 -105
package/README.md CHANGED
@@ -29,7 +29,9 @@ The `<auro-slideshow>` component is a wrapper element. All slides are slotted co
29
29
  <!-- AURO-GENERATED-CONTENT:END -->
30
30
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/readmeAddlInfo.md) -->
31
31
  <!-- The below content is automatically added from ./docs/partials/readmeAddlInfo.md -->
32
- `autoplay` and `autoScroll` are mutually exclusive properties and should not be used together on the same component instance.
32
+ `autoplay` and `autoScroll` are mutually exclusive properties and should not be used together on the same component instance.
33
+
34
+ On mobile devices, `autoScroll` and `navigation` controls are automatically disabled.
33
35
  <!-- AURO-GENERATED-CONTENT:END -->
34
36
 
35
37
  ## UI development browser support
@@ -80,7 +82,7 @@ import "@aurodesignsystem/auro-slideshow";
80
82
  <!-- The below code snippet is automatically added from ./apiExamples/basic.html -->
81
83
 
82
84
  ```html
83
- <auro-slideshow pagination autoplay playOnInit loop>
85
+ <auro-slideshow>
84
86
  <div style="height: 480px">
85
87
  <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=1" alt="Random image 1">
86
88
  </div>
@@ -140,7 +142,7 @@ The `<auro-slideshow>` element should be used in situations where:
140
142
  <!-- The below code snippet is automatically added from ./apiExamples/basic.html -->
141
143
 
142
144
  ```html
143
- <auro-slideshow pagination autoplay playOnInit loop>
145
+ <auro-slideshow>
144
146
  <div style="height: 480px">
145
147
  <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=1" alt="Random image 1">
146
148
  </div>
package/demo/api.html CHANGED
@@ -40,7 +40,7 @@
40
40
  Prism.highlightAll();
41
41
  });
42
42
  </script>
43
- <script type="module" data-demo-script="true" src="../api.min.js"></script>
43
+ <script type="module" data-demo-script="true" src="./api.min.js"></script>
44
44
 
45
45
  <!-- If additional elements are needed for the demo, add them here. -->
46
46
  <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
package/demo/api.md CHANGED
@@ -9,25 +9,50 @@
9
9
  |---------------|---------------|-----------|-------------------|--------------------------------------------------|
10
10
  | [autoScroll](#autoScroll) | `autoScroll` | `boolean` | false | If true, the slideshow will scroll continuously. |
11
11
  | [autoplay](#autoplay) | `autoplay` | `boolean` | false | If true, the slideshow will play automatically. |
12
- | [delay](#delay) | `delay` | `number` | 7000 | Slide duration in milliseconds. |
12
+ | [delay](#delay) | `delay` | `number` | 7000 | Slide duration in milliseconds. (Only used with `autoplay`) |
13
13
  | [loop](#loop) | `loop` | `boolean` | false | If true, the slideshow will loop back to the first slide after reaching the last slide. |
14
14
  | [navigation](#navigation) | `navigation` | `boolean` | false | If true, the slideshow will display navigation arrows for previous and next slides when the slide container is hovered. |
15
15
  | [pagination](#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. |
16
16
  | [pauseLabel](#pauseLabel) | `pauseLabel` | `string` | "Pause slideshow" | The aria-label for the pause button. |
17
17
  | [playLabel](#playLabel) | `playLabel` | `string` | "Play slideshow" | The aria-label for the play button. |
18
- | [playOnInit](#playOnInit) | `playOnInit` | `boolean` | false | If true, the slideshow will start playing automatically on page load. |
19
- | [scrollSpeed](#scrollSpeed) | `scrollSpeed` | `number` | 1 | Number of pixels auto scroll should advance per frame. |
20
- | [startDelay](#startDelay) | `startDelay` | `number` | 1000 | Delay in milliseconds before the auto scroll starts. |
18
+ | [playOnInit](#playOnInit) | `playOnInit` | `boolean` | false | If true, the slideshow will start playing automatically on page load when `autoplay` or `autoScroll` are on. |
19
+ | [scrollSpeed](#scrollSpeed) | `scrollSpeed` | `number` | 1 | Number of pixels auto scroll should advance per frame. (Only used with `autoScroll`) |
20
+ | [startDelay](#startDelay) | `startDelay` | `number` | 1000 | Delay in milliseconds before the auto scroll starts. (Only used with `autoScroll`) |
21
+
22
+ ## Methods
23
+
24
+ | Method | Type | Description |
25
+ |--------------|------------|--------------------------------|
26
+ | [play](#play) | `(): void` | Starts the slideshow playback. |
27
+ | [scrollNext](#scrollNext) | `(): void` | Scrolls to the next slide. |
28
+ | [scrollPrev](#scrollPrev) | `(): void` | Scrolls to the previous slide. |
29
+ | [stop](#stop) | `(): void` | Stops the slideshow playback. |
30
+
31
+ ## Slots
32
+
33
+ | Name | Description |
34
+ |------|--------------------------------------------------|
35
+ | | Default slot for the slides. Each child element will be treated as a slide. |
36
+
37
+ ## CSS Shadow Parts
38
+
39
+ | Part | Description |
40
+ |---------------------|---------------------------------------------|
41
+ | `next-button` | Use to style the next button control. |
42
+ | `play-pause-button` | Use to style the play/pause button control. |
43
+ | `prev-button` | Use to style the previous button control. |
21
44
  <!-- AURO-GENERATED-CONTENT:END -->
22
45
 
23
46
  ## API Examples
24
47
 
25
48
  ### Basic
26
49
 
50
+ 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.
51
+
27
52
  <div class="exampleWrapper">
28
53
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
29
54
  <!-- The below content is automatically added from ./../apiExamples/basic.html -->
30
- <auro-slideshow pagination autoplay playOnInit loop>
55
+ <auro-slideshow>
31
56
  <div style="height: 480px">
32
57
  <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=1" alt="Random image 1">
33
58
  </div>
@@ -52,7 +77,7 @@
52
77
  <!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
53
78
 
54
79
  ```html
55
- <auro-slideshow pagination autoplay playOnInit loop>
80
+ <auro-slideshow>
56
81
  <div style="height: 480px">
57
82
  <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=1" alt="Random image 1">
58
83
  </div>
@@ -71,4 +96,542 @@
71
96
  </auro-slideshow>
72
97
  ```
73
98
  <!-- AURO-GENERATED-CONTENT:END -->
99
+ </auro-accordion>
100
+
101
+ ### Autoplay
102
+
103
+ 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.
104
+
105
+ <div class="exampleWrapper">
106
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/autoplay.html) -->
107
+ <!-- The below content is automatically added from ./../apiExamples/autoplay.html -->
108
+ <auro-slideshow pagination autoplay playOnInit loop>
109
+ <div style="height: 480px">
110
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=1" alt="Random image 1">
111
+ </div>
112
+ <div style="height: 480px">
113
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=2" alt="Random image 2">
114
+ </div>
115
+ <div style="height: 480px">
116
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=3" alt="Random image 3">
117
+ </div>
118
+ <div style="height: 480px">
119
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=4" alt="Random image 4">
120
+ </div>
121
+ <div style="height: 480px">
122
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=5" alt="Random image 5">
123
+ </div>
124
+ </auro-slideshow>
125
+ <!-- AURO-GENERATED-CONTENT:END -->
126
+ </div>
127
+ <auro-accordion alignRight>
128
+ <span slot="trigger">See code</span>
129
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/autoplay.html) -->
130
+ <!-- The below code snippet is automatically added from ./../apiExamples/autoplay.html -->
131
+
132
+ ```html
133
+ <auro-slideshow pagination autoplay playOnInit loop>
134
+ <div style="height: 480px">
135
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=1" alt="Random image 1">
136
+ </div>
137
+ <div style="height: 480px">
138
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=2" alt="Random image 2">
139
+ </div>
140
+ <div style="height: 480px">
141
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=3" alt="Random image 3">
142
+ </div>
143
+ <div style="height: 480px">
144
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=4" alt="Random image 4">
145
+ </div>
146
+ <div style="height: 480px">
147
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=5" alt="Random image 5">
148
+ </div>
149
+ </auro-slideshow>
150
+ ```
151
+ <!-- AURO-GENERATED-CONTENT:END -->
152
+ </auro-accordion>
153
+
154
+ ### Delay
155
+
156
+ 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.
157
+
158
+ <div class="exampleWrapper">
159
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/delay.html) -->
160
+ <!-- The below content is automatically added from ./../apiExamples/delay.html -->
161
+ <auro-slideshow pagination autoplay delay="2000">
162
+ <div style="height: 480px">
163
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=1" alt="Random image 1">
164
+ </div>
165
+ <div style="height: 480px">
166
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=2" alt="Random image 2">
167
+ </div>
168
+ <div style="height: 480px">
169
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=3" alt="Random image 3">
170
+ </div>
171
+ <div style="height: 480px">
172
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=4" alt="Random image 4">
173
+ </div>
174
+ <div style="height: 480px">
175
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=5" alt="Random image 5">
176
+ </div>
177
+ </auro-slideshow>
178
+ <!-- AURO-GENERATED-CONTENT:END -->
179
+ </div>
180
+ <auro-accordion alignRight>
181
+ <span slot="trigger">See code</span>
182
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/delay.html) -->
183
+ <!-- The below code snippet is automatically added from ./../apiExamples/delay.html -->
184
+
185
+ ```html
186
+ <auro-slideshow pagination autoplay delay="2000">
187
+ <div style="height: 480px">
188
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=1" alt="Random image 1">
189
+ </div>
190
+ <div style="height: 480px">
191
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=2" alt="Random image 2">
192
+ </div>
193
+ <div style="height: 480px">
194
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=3" alt="Random image 3">
195
+ </div>
196
+ <div style="height: 480px">
197
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=4" alt="Random image 4">
198
+ </div>
199
+ <div style="height: 480px">
200
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=5" alt="Random image 5">
201
+ </div>
202
+ </auro-slideshow>
203
+ ```
204
+ <!-- AURO-GENERATED-CONTENT:END -->
205
+ </auro-accordion>
206
+
207
+ ### AutoScroll
208
+
209
+ 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.
210
+
211
+ `pagination` and `navigation` controls will not work unless the slideshow is stopped.
212
+
213
+ `autoScroll` is disabled on mobile devices.
214
+
215
+ <div class="exampleWrapper">
216
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/autoscroll.html) -->
217
+ <!-- The below content is automatically added from ./../apiExamples/autoscroll.html -->
218
+ <auro-slideshow navigation autoscroll playOnInit loop>
219
+ <div style="height: 480px; max-width: 400px;">
220
+ <img style="object-fit: cover;" src="https://picsum.photos/400/480?random=1" alt="Random image 1">
221
+ </div>
222
+ <div style="height: 480px; max-width: 400px;">
223
+ <img style="object-fit: cover;" src="https://picsum.photos/400/480?random=2" alt="Random image 2">
224
+ </div>
225
+ <div style="height: 480px; max-width: 400px;">
226
+ <img style="object-fit: cover;" src="https://picsum.photos/400/480?random=3" alt="Random image 3">
227
+ </div>
228
+ <div style="height: 480px; max-width: 400px;">
229
+ <img style="object-fit: cover;" src="https://picsum.photos/400/480?random=4" alt="Random image 4">
230
+ </div>
231
+ <div style="height: 480px; max-width: 400px;">
232
+ <img style="object-fit: cover;" src="https://picsum.photos/400/480?random=5" alt="Random image 5">
233
+ </div>
234
+ </auro-slideshow>
235
+ <!-- AURO-GENERATED-CONTENT:END -->
236
+ </div>
237
+ <auro-accordion alignRight>
238
+ <span slot="trigger">See code</span>
239
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/autoscroll.html) -->
240
+ <!-- The below code snippet is automatically added from ./../apiExamples/autoscroll.html -->
241
+
242
+ ```html
243
+ <auro-slideshow navigation autoscroll playOnInit loop>
244
+ <div style="height: 480px; max-width: 400px;">
245
+ <img style="object-fit: cover;" src="https://picsum.photos/400/480?random=1" alt="Random image 1">
246
+ </div>
247
+ <div style="height: 480px; max-width: 400px;">
248
+ <img style="object-fit: cover;" src="https://picsum.photos/400/480?random=2" alt="Random image 2">
249
+ </div>
250
+ <div style="height: 480px; max-width: 400px;">
251
+ <img style="object-fit: cover;" src="https://picsum.photos/400/480?random=3" alt="Random image 3">
252
+ </div>
253
+ <div style="height: 480px; max-width: 400px;">
254
+ <img style="object-fit: cover;" src="https://picsum.photos/400/480?random=4" alt="Random image 4">
255
+ </div>
256
+ <div style="height: 480px; max-width: 400px;">
257
+ <img style="object-fit: cover;" src="https://picsum.photos/400/480?random=5" alt="Random image 5">
258
+ </div>
259
+ </auro-slideshow>
260
+ ```
261
+ <!-- AURO-GENERATED-CONTENT:END -->
262
+ </auro-accordion>
263
+
264
+ ### ScrollSpeed
265
+
266
+ 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 1. To make the slideshow scroll faster, use a higher number. The value does not need to be whole number.
267
+
268
+ <div class="exampleWrapper">
269
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/scrollspeed.html) -->
270
+ <!-- The below content is automatically added from ./../apiExamples/scrollspeed.html -->
271
+ <auro-slideshow navigation autoscroll scrollSpeed="2.5" loop>
272
+ <div style="height: 480px; max-width: 400px;">
273
+ <img style="object-fit: cover;" src="https://picsum.photos/400/480?random=1" alt="Random image 1">
274
+ </div>
275
+ <div style="height: 480px; max-width: 400px;">
276
+ <img style="object-fit: cover;" src="https://picsum.photos/400/480?random=2" alt="Random image 2">
277
+ </div>
278
+ <div style="height: 480px; max-width: 400px;">
279
+ <img style="object-fit: cover;" src="https://picsum.photos/400/480?random=3" alt="Random image 3">
280
+ </div>
281
+ <div style="height: 480px; max-width: 400px;">
282
+ <img style="object-fit: cover;" src="https://picsum.photos/400/480?random=4" alt="Random image 4">
283
+ </div>
284
+ <div style="height: 480px; max-width: 400px;">
285
+ <img style="object-fit: cover;" src="https://picsum.photos/400/480?random=5" alt="Random image 5">
286
+ </div>
287
+ </auro-slideshow>
288
+ <!-- AURO-GENERATED-CONTENT:END -->
289
+ </div>
290
+ <auro-accordion alignRight>
291
+ <span slot="trigger">See code</span>
292
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/scrollspeed.html) -->
293
+ <!-- The below code snippet is automatically added from ./../apiExamples/scrollspeed.html -->
294
+
295
+ ```html
296
+ <auro-slideshow navigation autoscroll scrollSpeed="2.5" loop>
297
+ <div style="height: 480px; max-width: 400px;">
298
+ <img style="object-fit: cover;" src="https://picsum.photos/400/480?random=1" alt="Random image 1">
299
+ </div>
300
+ <div style="height: 480px; max-width: 400px;">
301
+ <img style="object-fit: cover;" src="https://picsum.photos/400/480?random=2" alt="Random image 2">
302
+ </div>
303
+ <div style="height: 480px; max-width: 400px;">
304
+ <img style="object-fit: cover;" src="https://picsum.photos/400/480?random=3" alt="Random image 3">
305
+ </div>
306
+ <div style="height: 480px; max-width: 400px;">
307
+ <img style="object-fit: cover;" src="https://picsum.photos/400/480?random=4" alt="Random image 4">
308
+ </div>
309
+ <div style="height: 480px; max-width: 400px;">
310
+ <img style="object-fit: cover;" src="https://picsum.photos/400/480?random=5" alt="Random image 5">
311
+ </div>
312
+ </auro-slideshow>
313
+ ```
314
+ <!-- AURO-GENERATED-CONTENT:END -->
315
+ </auro-accordion>
316
+
317
+ ### StartDelay
318
+
319
+ 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.
320
+
321
+ <div class="exampleWrapper">
322
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/startdelay.html) -->
323
+ <!-- The below content is automatically added from ./../apiExamples/startdelay.html -->
324
+ <auro-slideshow navigation autoscroll startDelay="200" loop>
325
+ <div style="height: 480px; max-width: 400px;">
326
+ <img style="object-fit: cover;" src="https://picsum.photos/400/480?random=1" alt="Random image 1">
327
+ </div>
328
+ <div style="height: 480px; max-width: 400px;">
329
+ <img style="object-fit: cover;" src="https://picsum.photos/400/480?random=2" alt="Random image 2">
330
+ </div>
331
+ <div style="height: 480px; max-width: 400px;">
332
+ <img style="object-fit: cover;" src="https://picsum.photos/400/480?random=3" alt="Random image 3">
333
+ </div>
334
+ <div style="height: 480px; max-width: 400px;">
335
+ <img style="object-fit: cover;" src="https://picsum.photos/400/480?random=4" alt="Random image 4">
336
+ </div>
337
+ <div style="height: 480px; max-width: 400px;">
338
+ <img style="object-fit: cover;" src="https://picsum.photos/400/480?random=5" alt="Random image 5">
339
+ </div>
340
+ </auro-slideshow>
341
+ <!-- AURO-GENERATED-CONTENT:END -->
342
+ </div>
343
+ <auro-accordion alignRight>
344
+ <span slot="trigger">See code</span>
345
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/startdelay.html) -->
346
+ <!-- The below code snippet is automatically added from ./../apiExamples/startdelay.html -->
347
+
348
+ ```html
349
+ <auro-slideshow navigation autoscroll startDelay="200" loop>
350
+ <div style="height: 480px; max-width: 400px;">
351
+ <img style="object-fit: cover;" src="https://picsum.photos/400/480?random=1" alt="Random image 1">
352
+ </div>
353
+ <div style="height: 480px; max-width: 400px;">
354
+ <img style="object-fit: cover;" src="https://picsum.photos/400/480?random=2" alt="Random image 2">
355
+ </div>
356
+ <div style="height: 480px; max-width: 400px;">
357
+ <img style="object-fit: cover;" src="https://picsum.photos/400/480?random=3" alt="Random image 3">
358
+ </div>
359
+ <div style="height: 480px; max-width: 400px;">
360
+ <img style="object-fit: cover;" src="https://picsum.photos/400/480?random=4" alt="Random image 4">
361
+ </div>
362
+ <div style="height: 480px; max-width: 400px;">
363
+ <img style="object-fit: cover;" src="https://picsum.photos/400/480?random=5" alt="Random image 5">
364
+ </div>
365
+ </auro-slideshow>
366
+ ```
367
+ <!-- AURO-GENERATED-CONTENT:END -->
368
+ </auro-accordion>
369
+
370
+ ### PlayOnInit
371
+
372
+ Setting the `playOnInit` attribute will start playing the slideshow when the page loads if `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.
373
+
374
+ <div class="exampleWrapper">
375
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/playoninit.html) -->
376
+ <!-- The below content is automatically added from ./../apiExamples/playoninit.html -->
377
+ <auro-slideshow autoscroll playOnInit loop>
378
+ <div style="height: 480px; max-width: 400px;">
379
+ <img style="object-fit: cover;" src="https://picsum.photos/400/480?random=1" alt="Random image 1">
380
+ </div>
381
+ <div style="height: 480px; max-width: 400px;">
382
+ <img style="object-fit: cover;" src="https://picsum.photos/400/480?random=2" alt="Random image 2">
383
+ </div>
384
+ <div style="height: 480px; max-width: 400px;">
385
+ <img style="object-fit: cover;" src="https://picsum.photos/400/480?random=3" alt="Random image 3">
386
+ </div>
387
+ <div style="height: 480px; max-width: 400px;">
388
+ <img style="object-fit: cover;" src="https://picsum.photos/400/480?random=4" alt="Random image 4">
389
+ </div>
390
+ <div style="height: 480px; max-width: 400px;">
391
+ <img style="object-fit: cover;" src="https://picsum.photos/400/480?random=5" alt="Random image 5">
392
+ </div>
393
+ </auro-slideshow>
394
+ <!-- AURO-GENERATED-CONTENT:END -->
395
+ </div>
396
+ <auro-accordion alignRight>
397
+ <span slot="trigger">See code</span>
398
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/playoninit.html) -->
399
+ <!-- The below code snippet is automatically added from ./../apiExamples/playoninit.html -->
400
+
401
+ ```html
402
+ <auro-slideshow autoscroll playOnInit loop>
403
+ <div style="height: 480px; max-width: 400px;">
404
+ <img style="object-fit: cover;" src="https://picsum.photos/400/480?random=1" alt="Random image 1">
405
+ </div>
406
+ <div style="height: 480px; max-width: 400px;">
407
+ <img style="object-fit: cover;" src="https://picsum.photos/400/480?random=2" alt="Random image 2">
408
+ </div>
409
+ <div style="height: 480px; max-width: 400px;">
410
+ <img style="object-fit: cover;" src="https://picsum.photos/400/480?random=3" alt="Random image 3">
411
+ </div>
412
+ <div style="height: 480px; max-width: 400px;">
413
+ <img style="object-fit: cover;" src="https://picsum.photos/400/480?random=4" alt="Random image 4">
414
+ </div>
415
+ <div style="height: 480px; max-width: 400px;">
416
+ <img style="object-fit: cover;" src="https://picsum.photos/400/480?random=5" alt="Random image 5">
417
+ </div>
418
+ </auro-slideshow>
419
+ ```
420
+ <!-- AURO-GENERATED-CONTENT:END -->
421
+ </auro-accordion>
422
+
423
+ ### Loop
424
+
425
+ 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.
426
+
427
+ <div class="exampleWrapper">
428
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/loop.html) -->
429
+ <!-- The below content is automatically added from ./../apiExamples/loop.html -->
430
+ <auro-slideshow pagination navigation loop>
431
+ <div style="height: 480px">
432
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=1" alt="Random image 1">
433
+ </div>
434
+ <div style="height: 480px">
435
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=2" alt="Random image 2">
436
+ </div>
437
+ <div style="height: 480px">
438
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=3" alt="Random image 3">
439
+ </div>
440
+ <div style="height: 480px">
441
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=4" alt="Random image 4">
442
+ </div>
443
+ <div style="height: 480px">
444
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=5" alt="Random image 5">
445
+ </div>
446
+ </auro-slideshow>
447
+ <!-- AURO-GENERATED-CONTENT:END -->
448
+ </div>
449
+ <auro-accordion alignRight>
450
+ <span slot="trigger">See code</span>
451
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/loop.html) -->
452
+ <!-- The below code snippet is automatically added from ./../apiExamples/loop.html -->
453
+
454
+ ```html
455
+ <auro-slideshow pagination navigation loop>
456
+ <div style="height: 480px">
457
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=1" alt="Random image 1">
458
+ </div>
459
+ <div style="height: 480px">
460
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=2" alt="Random image 2">
461
+ </div>
462
+ <div style="height: 480px">
463
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=3" alt="Random image 3">
464
+ </div>
465
+ <div style="height: 480px">
466
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=4" alt="Random image 4">
467
+ </div>
468
+ <div style="height: 480px">
469
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=5" alt="Random image 5">
470
+ </div>
471
+ </auro-slideshow>
472
+ ```
473
+ <!-- AURO-GENERATED-CONTENT:END -->
474
+ </auro-accordion>
475
+
476
+ ### Navigation
477
+
478
+ 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.
479
+
480
+ If `loop` is off, the respective arrow control will be disabled when the slideshow is at the beginning or the end.
481
+
482
+ `navigation` controls are disabled on mobile devices.
483
+
484
+ <div class="exampleWrapper">
485
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/navigation.html) -->
486
+ <!-- The below content is automatically added from ./../apiExamples/navigation.html -->
487
+ <auro-slideshow navigation>
488
+ <div style="height: 480px">
489
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=1" alt="Random image 1">
490
+ </div>
491
+ <div style="height: 480px">
492
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=2" alt="Random image 2">
493
+ </div>
494
+ <div style="height: 480px">
495
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=3" alt="Random image 3">
496
+ </div>
497
+ <div style="height: 480px">
498
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=4" alt="Random image 4">
499
+ </div>
500
+ <div style="height: 480px">
501
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=5" alt="Random image 5">
502
+ </div>
503
+ </auro-slideshow>
504
+ <!-- AURO-GENERATED-CONTENT:END -->
505
+ </div>
506
+ <auro-accordion alignRight>
507
+ <span slot="trigger">See code</span>
508
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/navigation.html) -->
509
+ <!-- The below code snippet is automatically added from ./../apiExamples/navigation.html -->
510
+
511
+ ```html
512
+ <auro-slideshow navigation>
513
+ <div style="height: 480px">
514
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=1" alt="Random image 1">
515
+ </div>
516
+ <div style="height: 480px">
517
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=2" alt="Random image 2">
518
+ </div>
519
+ <div style="height: 480px">
520
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=3" alt="Random image 3">
521
+ </div>
522
+ <div style="height: 480px">
523
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=4" alt="Random image 4">
524
+ </div>
525
+ <div style="height: 480px">
526
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=5" alt="Random image 5">
527
+ </div>
528
+ </auro-slideshow>
529
+ ```
530
+ <!-- AURO-GENERATED-CONTENT:END -->
531
+ </auro-accordion>
532
+
533
+ ### Pagination
534
+
535
+ Setting the `pagination` attribute will 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.
536
+
537
+ <div class="exampleWrapper">
538
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/pagination.html) -->
539
+ <!-- The below content is automatically added from ./../apiExamples/pagination.html -->
540
+ <auro-slideshow pagination>
541
+ <div style="height: 480px">
542
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=1" alt="Random image 1">
543
+ </div>
544
+ <div style="height: 480px">
545
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=2" alt="Random image 2">
546
+ </div>
547
+ <div style="height: 480px">
548
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=3" alt="Random image 3">
549
+ </div>
550
+ <div style="height: 480px">
551
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=4" alt="Random image 4">
552
+ </div>
553
+ <div style="height: 480px">
554
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=5" alt="Random image 5">
555
+ </div>
556
+ </auro-slideshow>
557
+ <!-- AURO-GENERATED-CONTENT:END -->
558
+ </div>
559
+ <auro-accordion alignRight>
560
+ <span slot="trigger">See code</span>
561
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/pagination.html) -->
562
+ <!-- The below code snippet is automatically added from ./../apiExamples/pagination.html -->
563
+
564
+ ```html
565
+ <auro-slideshow pagination>
566
+ <div style="height: 480px">
567
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=1" alt="Random image 1">
568
+ </div>
569
+ <div style="height: 480px">
570
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=2" alt="Random image 2">
571
+ </div>
572
+ <div style="height: 480px">
573
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=3" alt="Random image 3">
574
+ </div>
575
+ <div style="height: 480px">
576
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=4" alt="Random image 4">
577
+ </div>
578
+ <div style="height: 480px">
579
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=5" alt="Random image 5">
580
+ </div>
581
+ </auro-slideshow>
582
+ ```
583
+ <!-- AURO-GENERATED-CONTENT:END -->
584
+ </auro-accordion>
585
+
586
+ ### Custom labels for Play/Pause button
587
+
588
+ 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".
589
+
590
+ <div class="exampleWrapper">
591
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/customlabels.html) -->
592
+ <!-- The below content is automatically added from ./../apiExamples/customlabels.html -->
593
+ <auro-slideshow pagination autoplay playLabel="Reproducir diapositivas" pauseLabel="Pausar diapositivas">
594
+ <div style="height: 480px">
595
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=1" alt="Random image 1">
596
+ </div>
597
+ <div style="height: 480px">
598
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=2" alt="Random image 2">
599
+ </div>
600
+ <div style="height: 480px">
601
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=3" alt="Random image 3">
602
+ </div>
603
+ <div style="height: 480px">
604
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=4" alt="Random image 4">
605
+ </div>
606
+ <div style="height: 480px">
607
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=5" alt="Random image 5">
608
+ </div>
609
+ </auro-slideshow>
610
+ <!-- AURO-GENERATED-CONTENT:END -->
611
+ </div>
612
+ <auro-accordion alignRight>
613
+ <span slot="trigger">See code</span>
614
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/customlabels.html) -->
615
+ <!-- The below code snippet is automatically added from ./../apiExamples/customlabels.html -->
616
+
617
+ ```html
618
+ <auro-slideshow pagination autoplay playLabel="Reproducir diapositivas" pauseLabel="Pausar diapositivas">
619
+ <div style="height: 480px">
620
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=1" alt="Random image 1">
621
+ </div>
622
+ <div style="height: 480px">
623
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=2" alt="Random image 2">
624
+ </div>
625
+ <div style="height: 480px">
626
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=3" alt="Random image 3">
627
+ </div>
628
+ <div style="height: 480px">
629
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=4" alt="Random image 4">
630
+ </div>
631
+ <div style="height: 480px">
632
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=5" alt="Random image 5">
633
+ </div>
634
+ </auro-slideshow>
635
+ ```
636
+ <!-- AURO-GENERATED-CONTENT:END -->
74
637
  </auro-accordion>