@aurodesignsystem-dev/auro-slideshow 0.0.0-pr66.0 → 0.0.0-pr68.0

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 +66 -74
  2. package/demo/api.html +1 -1
  3. package/demo/api.md +270 -264
  4. package/demo/auro-slideshow.min.js +16 -12
  5. package/demo/index.html +3 -3
  6. package/demo/index.md +16 -81
  7. package/dist/{auro-slideshow-BG8voTdj.js → auro-slideshow-B2IA2NHn.js} +5 -5
  8. package/dist/index.d.ts +243 -140
  9. package/dist/index.js +1 -1
  10. package/dist/registered.js +1 -1
  11. package/package.json +18 -11
package/demo/api.md CHANGED
@@ -1,58 +1,58 @@
1
1
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/api.md) -->
2
2
  <!-- The below content is automatically added from ./../docs/api.md -->
3
3
 
4
- # auro-slideshow
4
+ # auro-slideshow
5
+
6
+ The `auro-slideshow` element is a customizable slideshow that displays a series of slides
7
+ with several options such as autoplay, navigation controls, and pagination dots.
5
8
 
6
- ## Properties
7
-
8
- | Property | Attribute | Type | Default | Description |
9
- |---------------|---------------|-----------|-------------------|--------------------------------------------------|
10
- | [autoScroll](#autoScroll) | `autoScroll` | `boolean` | false | If true, the slideshow will scroll continuously. |
11
- | [autoplay](#autoplay) | `autoplay` | `boolean` | false | If true, the slideshow will play automatically. |
12
- | [delay](#delay) | `delay` | `number` | 7000 | Slide duration in milliseconds. (Only used with `autoplay`) |
13
- | [fullBleed](#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) | `loop` | `boolean` | false | If true, the slideshow will loop back to the first slide after reaching the last slide. |
15
- | [navigation](#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) | `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) | `pauseLabel` | `string` | "Pause slideshow" | DEPRECATED - Use `ariaLabel.slideshow.pause` instead. |
18
- | [playLabel](#playLabel) | `playLabel` | `string` | "Play slideshow" | DEPRECATED - Use `ariaLabel.slideshow.play` instead. |
19
- | [playOnInit](#playOnInit) | `playOnInit` | `boolean` | false | If true, the slideshow will start playing automatically on page load when `autoplay` or `autoScroll` are on. |
20
- | [scrollSpeed](#scrollSpeed) | `scrollSpeed` | `number` | 0.75 | Number of pixels auto scroll should advance per frame. (Only used with `autoScroll`) |
21
- | [startDelay](#startDelay) | `startDelay` | `number` | 1000 | Delay in milliseconds before the auto scroll starts. (Only used with `autoScroll`) |
22
-
23
- ## Methods
24
-
25
- | Method | Type | Description |
26
- |--------------|------------|--------------------------------|
27
- | [play](#play) | `(): void` | Starts the slideshow playback. |
28
- | [scrollNext](#scrollNext) | `(): void` | Scrolls to the next slide. |
29
- | [scrollPrev](#scrollPrev) | `(): void` | Scrolls to the previous slide. |
30
- | [stop](#stop) | `(): void` | Stops the slideshow playback. |
31
-
32
- ## Slots
33
-
34
- | Name | Description |
35
- |-----------------------------|--------------------------------------------------|
36
- | | Default slot for the slides. Each child element will be treated as a slide. |
37
- | `ariaLabel.scroll.left` | The aria-label for the button navigating to the previous slide. Default is "Previous slide". |
38
- | `ariaLabel.scroll.right` | The aria-label for the button navigating to the next slide. Default is "Next slide". |
39
- | `ariaLabel.slideshow.pause` | The aria-label for the button that pauses the slideshow. Default is "Pause slideshow". |
40
- | `ariaLabel.slideshow.play` | The aria-label for the button that starts the slideshow. Default is "Play slideshow". |
41
-
42
- ## CSS Shadow Parts
43
-
44
- | Part | Description |
45
- |---------------------|---------------------------------------------|
46
- | `next-button` | Use to style the next button control. |
47
- | `play-pause-button` | Use to style the play/pause button control. |
48
- | `prev-button` | Use to style the previous button control. |
9
+ ### Properties & Attributes
10
+
11
+ | Properties | Attributes | Modifiers | Type | Default | Description |
12
+ | ----------- | ----------- | --------- | ------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
13
+ | autoplay | autoplay | | boolean | | If true, the slideshow will play automatically. |
14
+ | autoScroll | autoScroll | | boolean | | If true, the slideshow will scroll continuously. |
15
+ | delay | delay | | number | `7000` | Slide duration in milliseconds (Only used with `autoplay`). |
16
+ | fullBleed | fullBleed | | boolean | | 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. |
17
+ | loop | loop | | boolean | | If true, the slideshow will loop back to the first slide after reaching the last slide. |
18
+ | navigation | navigation | | boolean | | If true, the slideshow will display navigation arrows for previous and next slides when the slide container is hovered. |
19
+ | pagination | pagination | | boolean | | If true, the slideshow will display pagination dots for each slide. If autoplay is on, the active dot will also show a progress bar. |
20
+ | pauseLabel | pauseLabel | | string | | DEPRECATED - Use `ariaLabel.slideshow.pause` instead. |
21
+ | playLabel | playLabel | | string | | DEPRECATED - Use `ariaLabel.slideshow.play` instead. |
22
+ | playOnInit | playOnInit | | boolean | | If true, the slideshow will start playing automatically on page load when `autoplay` or `autoScroll` are on. |
23
+ | scrollSpeed | scrollSpeed | | number | `0.75` | Number of pixels auto scroll should advance per frame (Only used with `autoScroll`). |
24
+ | startDelay | startDelay | | number | `1000` | Delay in milliseconds before the auto scroll starts (Only used with `autoScroll`). |
25
+
26
+ ### Methods
27
+
28
+ | Name | Parameters | Return | Description |
29
+ | ---------- | -------------------------------------------------------------------- | ------ | ---------------------------------------------- |
30
+ | play | None | | Starts the slideshow playback. |
31
+ | register | `name` (string) - The name of the element that you want to register. | | Registers the custom element with the browser. |
32
+ | scrollNext | None | | Scrolls to the next slide. |
33
+ | scrollPrev | None | | Scrolls to the previous slide. |
34
+ | stop | None | | Stops the slideshow playback. |
35
+
36
+ ### Slots
37
+
38
+ | Name | Description |
39
+ | ------------------------- | -------------------------------------------------------------------------------------------- |
40
+ | (default) | Default slot for the slides. Each child element will be treated as a slide. |
41
+ | ariaLabel.scroll.left | The aria-label for the button navigating to the previous slide. Default is "Previous slide". |
42
+ | ariaLabel.scroll.right | The aria-label for the button navigating to the next slide. Default is "Next slide". |
43
+ | ariaLabel.slideshow.pause | The aria-label for the button that pauses the slideshow. Default is "Pause slideshow". |
44
+ | ariaLabel.slideshow.play | The aria-label for the button that starts the slideshow. Default is "Play slideshow". |
45
+
46
+ ### CSS Shadow Parts
47
+
48
+ | Name | Description |
49
+ | ----------------- | ------------------------------------------- |
50
+ | next-button | Use to style the next button control. |
51
+ | play-pause-button | Use to style the play/pause button control. |
52
+ | prev-button | Use to style the previous button control. |
49
53
  <!-- AURO-GENERATED-CONTENT:END -->
50
54
 
51
- ## API Examples
52
-
53
- ### Basic
54
-
55
- 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.
55
+ ## Basic
56
56
 
57
57
  <div class="exampleWrapper">
58
58
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
@@ -75,7 +75,7 @@ This is the slideshow with no features turned on. It can only be navigated by dr
75
75
  </div>
76
76
  </auro-slideshow>
77
77
  <!-- AURO-GENERATED-CONTENT:END -->
78
- </div>
78
+ </div>
79
79
  <auro-accordion alignRight>
80
80
  <span slot="trigger">See code</span>
81
81
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
@@ -103,18 +103,16 @@ This is the slideshow with no features turned on. It can only be navigated by dr
103
103
  <!-- AURO-GENERATED-CONTENT:END -->
104
104
  </auro-accordion>
105
105
 
106
- ### Navigation
107
-
108
- 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.
109
-
110
- If `loop` is off, the respective arrow control will be disabled/hidden when the slideshow is at the beginning or the end.
106
+ ## Property & Attribute Examples
107
+
108
+ ### Autoplay
111
109
 
112
- `navigation` controls are disabled on mobile devices.
110
+ Setting the `autoplay` attribute will render the play button so users can stop or start the slideshow.
113
111
 
114
112
  <div class="exampleWrapper">
115
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/navigation.html) -->
116
- <!-- The below content is automatically added from ./../apiExamples/navigation.html -->
117
- <auro-slideshow navigation>
113
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/autoplay.html) -->
114
+ <!-- The below content is automatically added from ./../apiExamples/autoplay.html -->
115
+ <auro-slideshow autoplay playOnInit loop>
118
116
  <div style="height: 480px">
119
117
  <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=1" alt="Random image 1">
120
118
  </div>
@@ -135,11 +133,11 @@ If `loop` is off, the respective arrow control will be disabled/hidden when the
135
133
  </div>
136
134
  <auro-accordion alignRight>
137
135
  <span slot="trigger">See code</span>
138
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/navigation.html) -->
139
- <!-- The below code snippet is automatically added from ./../apiExamples/navigation.html -->
136
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/autoplay.html) -->
137
+ <!-- The below code snippet is automatically added from ./../apiExamples/autoplay.html -->
140
138
 
141
139
  ```html
142
- <auro-slideshow navigation>
140
+ <auro-slideshow autoplay playOnInit loop>
143
141
  <div style="height: 480px">
144
142
  <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=1" alt="Random image 1">
145
143
  </div>
@@ -160,67 +158,71 @@ If `loop` is off, the respective arrow control will be disabled/hidden when the
160
158
  <!-- AURO-GENERATED-CONTENT:END -->
161
159
  </auro-accordion>
162
160
 
163
- ### Pagination
161
+ ### AutoScroll
164
162
 
165
- 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
+ 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.
164
+
165
+ `pagination` and `navigation` controls will not work unless the slideshow is stopped.
166
+
167
+ `autoScroll` is disabled on mobile devices.
166
168
 
167
169
  <div class="exampleWrapper">
168
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/pagination.html) -->
169
- <!-- The below content is automatically added from ./../apiExamples/pagination.html -->
170
- <auro-slideshow pagination>
171
- <div style="height: 480px">
172
- <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=1" alt="Random image 1">
173
- </div>
174
- <div style="height: 480px">
175
- <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=2" alt="Random image 2">
176
- </div>
177
- <div style="height: 480px">
178
- <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=3" alt="Random image 3">
179
- </div>
180
- <div style="height: 480px">
181
- <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=4" alt="Random image 4">
182
- </div>
183
- <div style="height: 480px">
184
- <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=5" alt="Random image 5">
185
- </div>
186
- </auro-slideshow>
170
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/autoscroll.html) -->
171
+ <!-- The below content is automatically added from ./../apiExamples/autoscroll.html -->
172
+ <auro-slideshow navigation autoScroll playOnInit loop>
173
+ <div style="height: 480px; max-width: 400px;">
174
+ <img style="object-fit: cover;" src="https://picsum.photos/400/480?random=1" alt="Random image 1">
175
+ </div>
176
+ <div style="height: 480px; max-width: 400px;">
177
+ <img style="object-fit: cover;" src="https://picsum.photos/400/480?random=2" alt="Random image 2">
178
+ </div>
179
+ <div style="height: 480px; max-width: 400px;">
180
+ <img style="object-fit: cover;" src="https://picsum.photos/400/480?random=3" alt="Random image 3">
181
+ </div>
182
+ <div style="height: 480px; max-width: 400px;">
183
+ <img style="object-fit: cover;" src="https://picsum.photos/400/480?random=4" alt="Random image 4">
184
+ </div>
185
+ <div style="height: 480px; max-width: 400px;">
186
+ <img style="object-fit: cover;" src="https://picsum.photos/400/480?random=5" alt="Random image 5">
187
+ </div>
188
+ </auro-slideshow>
187
189
  <!-- AURO-GENERATED-CONTENT:END -->
188
190
  </div>
189
191
  <auro-accordion alignRight>
190
192
  <span slot="trigger">See code</span>
191
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/pagination.html) -->
192
- <!-- The below code snippet is automatically added from ./../apiExamples/pagination.html -->
193
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/autoscroll.html) -->
194
+ <!-- The below code snippet is automatically added from ./../apiExamples/autoscroll.html -->
193
195
 
194
196
  ```html
195
- <auro-slideshow pagination>
196
- <div style="height: 480px">
197
- <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=1" alt="Random image 1">
198
- </div>
199
- <div style="height: 480px">
200
- <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=2" alt="Random image 2">
201
- </div>
202
- <div style="height: 480px">
203
- <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=3" alt="Random image 3">
204
- </div>
205
- <div style="height: 480px">
206
- <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=4" alt="Random image 4">
207
- </div>
208
- <div style="height: 480px">
209
- <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=5" alt="Random image 5">
210
- </div>
211
- </auro-slideshow>
197
+ <auro-slideshow navigation autoScroll playOnInit loop>
198
+ <div style="height: 480px; max-width: 400px;">
199
+ <img style="object-fit: cover;" src="https://picsum.photos/400/480?random=1" alt="Random image 1">
200
+ </div>
201
+ <div style="height: 480px; max-width: 400px;">
202
+ <img style="object-fit: cover;" src="https://picsum.photos/400/480?random=2" alt="Random image 2">
203
+ </div>
204
+ <div style="height: 480px; max-width: 400px;">
205
+ <img style="object-fit: cover;" src="https://picsum.photos/400/480?random=3" alt="Random image 3">
206
+ </div>
207
+ <div style="height: 480px; max-width: 400px;">
208
+ <img style="object-fit: cover;" src="https://picsum.photos/400/480?random=4" alt="Random image 4">
209
+ </div>
210
+ <div style="height: 480px; max-width: 400px;">
211
+ <img style="object-fit: cover;" src="https://picsum.photos/400/480?random=5" alt="Random image 5">
212
+ </div>
213
+ </auro-slideshow>
212
214
  ```
213
215
  <!-- AURO-GENERATED-CONTENT:END -->
214
216
  </auro-accordion>
215
217
 
216
- ### Loop
218
+ ### Delay
217
219
 
218
- 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.
220
+ 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.
219
221
 
220
222
  <div class="exampleWrapper">
221
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/loop.html) -->
222
- <!-- The below content is automatically added from ./../apiExamples/loop.html -->
223
- <auro-slideshow pagination navigation loop>
223
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/delay.html) -->
224
+ <!-- The below content is automatically added from ./../apiExamples/delay.html -->
225
+ <auro-slideshow autoplay delay="2000">
224
226
  <div style="height: 480px">
225
227
  <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=1" alt="Random image 1">
226
228
  </div>
@@ -241,11 +243,11 @@ If the `loop` attribute is on, the slideshow will go back to the first slide whe
241
243
  </div>
242
244
  <auro-accordion alignRight>
243
245
  <span slot="trigger">See code</span>
244
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/loop.html) -->
245
- <!-- The below code snippet is automatically added from ./../apiExamples/loop.html -->
246
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/delay.html) -->
247
+ <!-- The below code snippet is automatically added from ./../apiExamples/delay.html -->
246
248
 
247
249
  ```html
248
- <auro-slideshow pagination navigation loop>
250
+ <auro-slideshow autoplay delay="2000">
249
251
  <div style="height: 480px">
250
252
  <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=1" alt="Random image 1">
251
253
  </div>
@@ -266,14 +268,16 @@ If the `loop` attribute is on, the slideshow will go back to the first slide whe
266
268
  <!-- AURO-GENERATED-CONTENT:END -->
267
269
  </auro-accordion>
268
270
 
269
- ### Autoplay
271
+ ### Full-Bleed Preview
270
272
 
271
- 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.
273
+ 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.
274
+
275
+ **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.
272
276
 
273
277
  <div class="exampleWrapper">
274
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/autoplay.html) -->
275
- <!-- The below content is automatically added from ./../apiExamples/autoplay.html -->
276
- <auro-slideshow pagination autoplay playOnInit loop>
278
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/full-bleed.html) -->
279
+ <!-- The below content is automatically added from ./../apiExamples/full-bleed.html -->
280
+ <auro-slideshow fullBleed autoplay navigation loop>
277
281
  <div style="height: 480px">
278
282
  <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=1" alt="Random image 1">
279
283
  </div>
@@ -290,15 +294,80 @@ Setting the `autoplay` attribute will render the play button so users can stop o
290
294
  <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=5" alt="Random image 5">
291
295
  </div>
292
296
  </auro-slideshow>
297
+ <!-- For demo purposes only -->
298
+ <style>
299
+ body {
300
+ overflow-x: hidden;
301
+ }
302
+ </style>
293
303
  <!-- AURO-GENERATED-CONTENT:END -->
294
304
  </div>
295
305
  <auro-accordion alignRight>
296
306
  <span slot="trigger">See code</span>
297
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/autoplay.html) -->
298
- <!-- The below code snippet is automatically added from ./../apiExamples/autoplay.html -->
307
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/full-bleed.html) -->
308
+ <!-- The below code snippet is automatically added from ./../apiExamples/full-bleed.html -->
309
+
310
+ ```html
311
+ <auro-slideshow fullBleed autoplay navigation loop>
312
+ <div style="height: 480px">
313
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=1" alt="Random image 1">
314
+ </div>
315
+ <div style="height: 480px">
316
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=2" alt="Random image 2">
317
+ </div>
318
+ <div style="height: 480px">
319
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=3" alt="Random image 3">
320
+ </div>
321
+ <div style="height: 480px">
322
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=4" alt="Random image 4">
323
+ </div>
324
+ <div style="height: 480px">
325
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=5" alt="Random image 5">
326
+ </div>
327
+ </auro-slideshow>
328
+ <!-- For demo purposes only -->
329
+ <style>
330
+ body {
331
+ overflow-x: hidden;
332
+ }
333
+ </style>
334
+ ```
335
+ <!-- AURO-GENERATED-CONTENT:END -->
336
+ </auro-accordion>
337
+
338
+ ### Loop
339
+
340
+ 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.
341
+
342
+ <div class="exampleWrapper">
343
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/loop.html) -->
344
+ <!-- The below content is automatically added from ./../apiExamples/loop.html -->
345
+ <auro-slideshow pagination navigation loop>
346
+ <div style="height: 480px">
347
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=1" alt="Random image 1">
348
+ </div>
349
+ <div style="height: 480px">
350
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=2" alt="Random image 2">
351
+ </div>
352
+ <div style="height: 480px">
353
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=3" alt="Random image 3">
354
+ </div>
355
+ <div style="height: 480px">
356
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=4" alt="Random image 4">
357
+ </div>
358
+ <div style="height: 480px">
359
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=5" alt="Random image 5">
360
+ </div>
361
+ </auro-slideshow>
362
+ <!-- AURO-GENERATED-CONTENT:END -->
363
+ </div>
364
+ <auro-accordion alignRight>
365
+ <span slot="trigger">See code</span>
366
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/loop.html) -->
367
+ <!-- The below code snippet is automatically added from ./../apiExamples/loop.html -->
299
368
 
300
369
  ```html
301
- <auro-slideshow pagination autoplay playOnInit loop>
370
+ <auro-slideshow pagination navigation loop>
302
371
  <div style="height: 480px">
303
372
  <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=1" alt="Random image 1">
304
373
  </div>
@@ -319,14 +388,18 @@ Setting the `autoplay` attribute will render the play button so users can stop o
319
388
  <!-- AURO-GENERATED-CONTENT:END -->
320
389
  </auro-accordion>
321
390
 
322
- ### Delay
391
+ ### Navigation
323
392
 
324
- 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.
393
+ 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.
394
+
395
+ If `loop` is off, the respective arrow control will be disabled/hidden when the slideshow is at the beginning or the end.
396
+
397
+ `navigation` controls are disabled on mobile devices.
325
398
 
326
399
  <div class="exampleWrapper">
327
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/delay.html) -->
328
- <!-- The below content is automatically added from ./../apiExamples/delay.html -->
329
- <auro-slideshow pagination autoplay delay="2000">
400
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/navigation.html) -->
401
+ <!-- The below content is automatically added from ./../apiExamples/navigation.html -->
402
+ <auro-slideshow navigation>
330
403
  <div style="height: 480px">
331
404
  <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=1" alt="Random image 1">
332
405
  </div>
@@ -347,11 +420,11 @@ To set a custom slide duration on an `autoplay` slideshow, use the `delay` attri
347
420
  </div>
348
421
  <auro-accordion alignRight>
349
422
  <span slot="trigger">See code</span>
350
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/delay.html) -->
351
- <!-- The below code snippet is automatically added from ./../apiExamples/delay.html -->
423
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/navigation.html) -->
424
+ <!-- The below code snippet is automatically added from ./../apiExamples/navigation.html -->
352
425
 
353
426
  ```html
354
- <auro-slideshow pagination autoplay delay="2000">
427
+ <auro-slideshow navigation>
355
428
  <div style="height: 480px">
356
429
  <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=1" alt="Random image 1">
357
430
  </div>
@@ -372,18 +445,67 @@ To set a custom slide duration on an `autoplay` slideshow, use the `delay` attri
372
445
  <!-- AURO-GENERATED-CONTENT:END -->
373
446
  </auro-accordion>
374
447
 
375
- ### AutoScroll
448
+ ### Pagination
376
449
 
377
- 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.
450
+ 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.
378
451
 
379
- `pagination` and `navigation` controls will not work unless the slideshow is stopped.
452
+ <div class="exampleWrapper">
453
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/pagination.html) -->
454
+ <!-- The below content is automatically added from ./../apiExamples/pagination.html -->
455
+ <auro-slideshow pagination>
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
+ <!-- AURO-GENERATED-CONTENT:END -->
473
+ </div>
474
+ <auro-accordion alignRight>
475
+ <span slot="trigger">See code</span>
476
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/pagination.html) -->
477
+ <!-- The below code snippet is automatically added from ./../apiExamples/pagination.html -->
478
+
479
+ ```html
480
+ <auro-slideshow pagination>
481
+ <div style="height: 480px">
482
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=1" alt="Random image 1">
483
+ </div>
484
+ <div style="height: 480px">
485
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=2" alt="Random image 2">
486
+ </div>
487
+ <div style="height: 480px">
488
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=3" alt="Random image 3">
489
+ </div>
490
+ <div style="height: 480px">
491
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=4" alt="Random image 4">
492
+ </div>
493
+ <div style="height: 480px">
494
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=5" alt="Random image 5">
495
+ </div>
496
+ </auro-slideshow>
497
+ ```
498
+ <!-- AURO-GENERATED-CONTENT:END -->
499
+ </auro-accordion>
500
+
501
+ ### PlayOnInit
380
502
 
381
- `autoScroll` is disabled on mobile devices.
503
+ 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.
382
504
 
383
505
  <div class="exampleWrapper">
384
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/autoscroll.html) -->
385
- <!-- The below content is automatically added from ./../apiExamples/autoscroll.html -->
386
- <auro-slideshow navigation autoScroll playOnInit loop>
506
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/playoninit.html) -->
507
+ <!-- The below content is automatically added from ./../apiExamples/playoninit.html -->
508
+ <auro-slideshow autoScroll playOnInit loop>
387
509
  <div style="height: 480px; max-width: 400px;">
388
510
  <img style="object-fit: cover;" src="https://picsum.photos/400/480?random=1" alt="Random image 1">
389
511
  </div>
@@ -404,11 +526,11 @@ Setting the `autoScroll` attribute will also render the play button, but unlike
404
526
  </div>
405
527
  <auro-accordion alignRight>
406
528
  <span slot="trigger">See code</span>
407
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/autoscroll.html) -->
408
- <!-- The below code snippet is automatically added from ./../apiExamples/autoscroll.html -->
529
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/playoninit.html) -->
530
+ <!-- The below code snippet is automatically added from ./../apiExamples/playoninit.html -->
409
531
 
410
532
  ```html
411
- <auro-slideshow navigation autoScroll playOnInit loop>
533
+ <auro-slideshow autoScroll playOnInit loop>
412
534
  <div style="height: 480px; max-width: 400px;">
413
535
  <img style="object-fit: cover;" src="https://picsum.photos/400/480?random=1" alt="Random image 1">
414
536
  </div>
@@ -535,60 +657,9 @@ To set a custom delay before the `autoScroll` restarts, use the `startDelay` att
535
657
  <!-- AURO-GENERATED-CONTENT:END -->
536
658
  </auro-accordion>
537
659
 
538
- ### PlayOnInit
539
-
540
- 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.
541
-
542
- <div class="exampleWrapper">
543
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/playoninit.html) -->
544
- <!-- The below content is automatically added from ./../apiExamples/playoninit.html -->
545
- <auro-slideshow autoScroll playOnInit loop>
546
- <div style="height: 480px; max-width: 400px;">
547
- <img style="object-fit: cover;" src="https://picsum.photos/400/480?random=1" alt="Random image 1">
548
- </div>
549
- <div style="height: 480px; max-width: 400px;">
550
- <img style="object-fit: cover;" src="https://picsum.photos/400/480?random=2" alt="Random image 2">
551
- </div>
552
- <div style="height: 480px; max-width: 400px;">
553
- <img style="object-fit: cover;" src="https://picsum.photos/400/480?random=3" alt="Random image 3">
554
- </div>
555
- <div style="height: 480px; max-width: 400px;">
556
- <img style="object-fit: cover;" src="https://picsum.photos/400/480?random=4" alt="Random image 4">
557
- </div>
558
- <div style="height: 480px; max-width: 400px;">
559
- <img style="object-fit: cover;" src="https://picsum.photos/400/480?random=5" alt="Random image 5">
560
- </div>
561
- </auro-slideshow>
562
- <!-- AURO-GENERATED-CONTENT:END -->
563
- </div>
564
- <auro-accordion alignRight>
565
- <span slot="trigger">See code</span>
566
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/playoninit.html) -->
567
- <!-- The below code snippet is automatically added from ./../apiExamples/playoninit.html -->
660
+ ## Slot Examples
568
661
 
569
- ```html
570
- <auro-slideshow autoScroll playOnInit loop>
571
- <div style="height: 480px; max-width: 400px;">
572
- <img style="object-fit: cover;" src="https://picsum.photos/400/480?random=1" alt="Random image 1">
573
- </div>
574
- <div style="height: 480px; max-width: 400px;">
575
- <img style="object-fit: cover;" src="https://picsum.photos/400/480?random=2" alt="Random image 2">
576
- </div>
577
- <div style="height: 480px; max-width: 400px;">
578
- <img style="object-fit: cover;" src="https://picsum.photos/400/480?random=3" alt="Random image 3">
579
- </div>
580
- <div style="height: 480px; max-width: 400px;">
581
- <img style="object-fit: cover;" src="https://picsum.photos/400/480?random=4" alt="Random image 4">
582
- </div>
583
- <div style="height: 480px; max-width: 400px;">
584
- <img style="object-fit: cover;" src="https://picsum.photos/400/480?random=5" alt="Random image 5">
585
- </div>
586
- </auro-slideshow>
587
- ```
588
- <!-- AURO-GENERATED-CONTENT:END -->
589
- </auro-accordion>
590
-
591
- ### Custom labels for accessibility
662
+ ### Slots for Aria-Labels
592
663
 
593
664
  To customize the aria-labels for the slideshow controls, use the following slots:
594
665
  - `ariaLabel.scroll.left` - Previous slide button
@@ -597,8 +668,8 @@ To customize the aria-labels for the slideshow controls, use the following slots
597
668
  - `ariaLabel.slideshow.pause` - Pause slideshow button
598
669
 
599
670
  <div class="exampleWrapper">
600
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/ariaLabelSlots.html) -->
601
- <!-- The below content is automatically added from ./../apiExamples/ariaLabelSlots.html -->
671
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/slots_aria-label.html) -->
672
+ <!-- The below content is automatically added from ./../apiExamples/slots_aria-label.html -->
602
673
  <auro-slideshow autoplay navigation>
603
674
  <span slot="ariaLabel.scroll.left">Custom label for previous slide</span>
604
675
  <span slot="ariaLabel.scroll.right">Custom label for next slide</span>
@@ -624,8 +695,8 @@ To customize the aria-labels for the slideshow controls, use the following slots
624
695
  </div>
625
696
  <auro-accordion alignRight>
626
697
  <span slot="trigger">See code</span>
627
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/ariaLabelSlots.html) -->
628
- <!-- The below code snippet is automatically added from ./../apiExamples/ariaLabelSlots.html -->
698
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/slots_aria-label.html) -->
699
+ <!-- The below code snippet is automatically added from ./../apiExamples/slots_aria-label.html -->
629
700
 
630
701
  ```html
631
702
  <auro-slideshow autoplay navigation>
@@ -653,78 +724,13 @@ To customize the aria-labels for the slideshow controls, use the following slots
653
724
  <!-- AURO-GENERATED-CONTENT:END -->
654
725
  </auro-accordion>
655
726
 
656
- ### Full-Bleed Preview
657
-
658
- 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.
659
-
660
- **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.
661
-
662
- <div class="exampleWrapper">
663
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/fullBleed.html) -->
664
- <!-- The below content is automatically added from ./../apiExamples/fullBleed.html -->
665
- <auro-slideshow fullBleed autoplay pagination navigation loop>
666
- <div style="height: 480px">
667
- <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=1" alt="Random image 1">
668
- </div>
669
- <div style="height: 480px">
670
- <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=2" alt="Random image 2">
671
- </div>
672
- <div style="height: 480px">
673
- <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=3" alt="Random image 3">
674
- </div>
675
- <div style="height: 480px">
676
- <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=4" alt="Random image 4">
677
- </div>
678
- <div style="height: 480px">
679
- <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=5" alt="Random image 5">
680
- </div>
681
- </auro-slideshow>
682
- <!-- For demo purposes only -->
683
- <style>
684
- body {
685
- overflow-x: hidden;
686
- }
687
- </style>
688
- <!-- AURO-GENERATED-CONTENT:END -->
689
- </div>
690
- <auro-accordion alignRight>
691
- <span slot="trigger">See code</span>
692
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/fullBleed.html) -->
693
- <!-- The below code snippet is automatically added from ./../apiExamples/fullBleed.html -->
694
-
695
- ```html
696
- <auro-slideshow fullBleed autoplay pagination navigation loop>
697
- <div style="height: 480px">
698
- <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=1" alt="Random image 1">
699
- </div>
700
- <div style="height: 480px">
701
- <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=2" alt="Random image 2">
702
- </div>
703
- <div style="height: 480px">
704
- <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=3" alt="Random image 3">
705
- </div>
706
- <div style="height: 480px">
707
- <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=4" alt="Random image 4">
708
- </div>
709
- <div style="height: 480px">
710
- <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=5" alt="Random image 5">
711
- </div>
712
- </auro-slideshow>
713
- <!-- For demo purposes only -->
714
- <style>
715
- body {
716
- overflow-x: hidden;
717
- }
718
- </style>
719
- ```
720
- <!-- AURO-GENERATED-CONTENT:END -->
721
- </auro-accordion>
727
+ ## Common Usage Patterns & Functional Examples
722
728
 
723
729
  ### Full-Bleed + AutoScroll Preview
724
730
 
725
731
  <div class="exampleWrapper">
726
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/fullBleedAutoScroll.html) -->
727
- <!-- The below content is automatically added from ./../apiExamples/fullBleedAutoScroll.html -->
732
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/full-bleed-autoscroll.html) -->
733
+ <!-- The below content is automatically added from ./../apiExamples/full-bleed-autoscroll.html -->
728
734
  <auro-slideshow fullBleed navigation autoScroll playOnInit loop>
729
735
  <div style="height: 480px; max-width: 400px;">
730
736
  <img style="object-fit: cover;" src="https://picsum.photos/400/480?random=1" alt="Random image 1">
@@ -761,8 +767,8 @@ To enable the slideshow to show a preview of the previous and next slides, use t
761
767
  </div>
762
768
  <auro-accordion alignRight>
763
769
  <span slot="trigger">See code</span>
764
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/fullBleedAutoScroll.html) -->
765
- <!-- The below code snippet is automatically added from ./../apiExamples/fullBleedAutoScroll.html -->
770
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/full-bleed-autoscroll.html) -->
771
+ <!-- The below code snippet is automatically added from ./../apiExamples/full-bleed-autoscroll.html -->
766
772
 
767
773
  ```html
768
774
  <auro-slideshow fullBleed navigation autoScroll playOnInit loop>
@@ -799,4 +805,4 @@ To enable the slideshow to show a preview of the previous and next slides, use t
799
805
  </style>
800
806
  ```
801
807
  <!-- AURO-GENERATED-CONTENT:END -->
802
- </auro-accordion>
808
+ </auro-accordion>