@aurodesignsystem-dev/auro-slideshow 0.0.0-pr18.0 → 0.0.0-pr19.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 (15) hide show
  1. package/README.md +42 -30
  2. package/demo/api.html +2 -2
  3. package/demo/api.js +1 -1
  4. package/demo/api.md +217 -147
  5. package/demo/api.min.js +2 -4417
  6. package/demo/auro-slideshow.min.js +4327 -0
  7. package/demo/demo-index.js +1 -1
  8. package/demo/demo-index.min.js +1 -2222
  9. package/demo/index.md +126 -41
  10. package/dist/auro-slideshow-DwITKEwA.js +106 -0
  11. package/dist/index.d.ts +101 -155
  12. package/dist/index.js +1 -1
  13. package/dist/registered.js +1 -1
  14. package/package.json +10 -6
  15. package/dist/auro-slideshow-CQx2uBIO.js +0 -101
package/README.md CHANGED
@@ -21,15 +21,15 @@ The following sections are editable by making changes to the following files:
21
21
 
22
22
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/description.md) -->
23
23
  <!-- The below content is automatically added from ./docs/partials/description.md -->
24
- `<auro-slideshow>` is a [HTML custom element](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) for the purpose of ...
24
+ `<auro-slideshow>` is an [HTML custom element](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) for the purpose of displaying a sequence of slides, which can automatically advance through the content or be manually controlled by the user.
25
25
 
26
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam convallis in tellus nec pellentesque. Integer bibendum ligula sit amet vehicula gravida. Maecenas accumsan, ligula vitae molestie iaculis, tellus mi laoreet ex [install instructions](https://auro.alaskaair.com/components/auro/button/install), ac malesuada velit dolor vel mi. Cras et rutrum urna. Sed mattis mi eu tortor ullamcorper, egestas bibendum mauris cursus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus viverra eros eget neque commodo vulputate. In tempus eu velit at dictum.
26
+ The `<auro-slideshow>` component is a wrapper element. All slides are slotted content and must be direct children of the component.
27
27
 
28
- Nulla at augue facilisis `odio lobortis` molestie vitae a nulla.
28
+ `<auro-slideshow>` is a fully customizable component and does not come with any features turned on by default. The features of `<auro-slideshow>` are turned on by including the proper attributes on the element.
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
- <!-- AURO-GENERATED-CONTENT This file is to be used for any additional content that should be included in the README.md which is specific to this component. -->
32
+ Autoplay and AutoScroll are mutually exclusive properties and should not be used together on the same component instance.
33
33
  <!-- AURO-GENERATED-CONTENT:END -->
34
34
 
35
35
  ## UI development browser support
@@ -80,17 +80,23 @@ import "@aurodesignsystem/auro-slideshow";
80
80
  <!-- The below code snippet is automatically added from ./apiExamples/basic.html -->
81
81
 
82
82
  ```html
83
- <auro-slideshow loop pagination>
84
- <span slot="header">Slider Header</span>
85
- <span slot="subheader">Subheader</span>
86
- <img src="https://picsum.photos/200?random=0" style="height: 300px; width: 600px;" alt="Random insert 0">
87
- <div style="height: 300px; width: 500px; background-color: bisque;">Slide 2</div>
88
- <img src="https://picsum.photos/200?random=1" style="height: 300px; width: 200px;" alt="Random insert 1">
89
- <img src="https://picsum.photos/200?random=2" style="height: 300px; width: 300px;" alt="Random insert 2">
90
- <img src="https://picsum.photos/200?random=3" style="height: 300px; width: 500px;" alt="Random insert 3">
91
- <img src="https://picsum.photos/200?random=4" style="height: 300px; width: 400px;" alt="Random insert 4">
92
- <img src="https://picsum.photos/200?random=5" style="height: 300px; width: 300px;" alt="Random insert 5">
93
- </auro-slideshow>
83
+ <auro-slideshow pagination autoplay playOnInit loop>
84
+ <div style="height: 480px">
85
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=1" alt="Random image 1">
86
+ </div>
87
+ <div style="height: 480px">
88
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=2" alt="Random image 2">
89
+ </div>
90
+ <div style="height: 480px">
91
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=3" alt="Random image 3">
92
+ </div>
93
+ <div style="height: 480px">
94
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=4" alt="Random image 4">
95
+ </div>
96
+ <div style="height: 480px">
97
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=5" alt="Random image 5">
98
+ </div>
99
+ </auro-slideshow>
94
100
  ```
95
101
  <!-- AURO-GENERATED-CONTENT:END -->
96
102
 
@@ -119,11 +125,11 @@ In cases where the project is not able to process JS assets, there are pre-proce
119
125
 
120
126
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/useCases.md) -->
121
127
  <!-- The below content is automatically added from ./docs/partials/useCases.md -->
122
- The `<auro-slideshow>` element should be used in situations where users may:
128
+ The `<auro-slideshow>` element should be used in situations where:
123
129
 
124
- * ...
125
- * ...
126
- * ...
130
+ * A series of images or content needs to be displayed in a space-saving way
131
+ * Autoplaying or autoscrolling functionality is needed
132
+ * A current slide indicator is required
127
133
  <!-- AURO-GENERATED-CONTENT:END -->
128
134
 
129
135
  ## API Code Examples
@@ -134,17 +140,23 @@ The `<auro-slideshow>` element should be used in situations where users may:
134
140
  <!-- The below code snippet is automatically added from ./apiExamples/basic.html -->
135
141
 
136
142
  ```html
137
- <auro-slideshow loop pagination>
138
- <span slot="header">Slider Header</span>
139
- <span slot="subheader">Subheader</span>
140
- <img src="https://picsum.photos/200?random=0" style="height: 300px; width: 600px;" alt="Random insert 0">
141
- <div style="height: 300px; width: 500px; background-color: bisque;">Slide 2</div>
142
- <img src="https://picsum.photos/200?random=1" style="height: 300px; width: 200px;" alt="Random insert 1">
143
- <img src="https://picsum.photos/200?random=2" style="height: 300px; width: 300px;" alt="Random insert 2">
144
- <img src="https://picsum.photos/200?random=3" style="height: 300px; width: 500px;" alt="Random insert 3">
145
- <img src="https://picsum.photos/200?random=4" style="height: 300px; width: 400px;" alt="Random insert 4">
146
- <img src="https://picsum.photos/200?random=5" style="height: 300px; width: 300px;" alt="Random insert 5">
147
- </auro-slideshow>
143
+ <auro-slideshow pagination autoplay playOnInit loop>
144
+ <div style="height: 480px">
145
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=1" alt="Random image 1">
146
+ </div>
147
+ <div style="height: 480px">
148
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=2" alt="Random image 2">
149
+ </div>
150
+ <div style="height: 480px">
151
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=3" alt="Random image 3">
152
+ </div>
153
+ <div style="height: 480px">
154
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=4" alt="Random image 4">
155
+ </div>
156
+ <div style="height: 480px">
157
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=5" alt="Random image 5">
158
+ </div>
159
+ </auro-slideshow>
148
160
  ```
149
161
  <!-- AURO-GENERATED-CONTENT:END -->
150
162
 
package/demo/api.html CHANGED
@@ -32,7 +32,7 @@
32
32
  <script type="module">
33
33
  import 'https://cdn.jsdelivr.net/npm/marked@latest/marked.min.js';
34
34
  import 'https://cdn.jsdelivr.net/npm/prismjs@latest/prism.js';
35
- fetch('/demo/api.md')
35
+ fetch('./api.md')
36
36
  .then((response) => response.text())
37
37
  .then((text) => {
38
38
  const rawHtml = marked.parse(text);
@@ -40,7 +40,7 @@
40
40
  Prism.highlightAll();
41
41
  });
42
42
  </script>
43
- <script type="module" data-demo-script="true" src="../api.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.js CHANGED
@@ -1 +1 @@
1
- import "../src/index.js";
1
+ import "../src/registered.js";
package/demo/api.md CHANGED
@@ -5,21 +5,19 @@
5
5
 
6
6
  ## Properties
7
7
 
8
- | Property | Attribute | Type | Default | Description |
9
- |----------------------|----------------------|-----------|----------------|--------------------------------------------------|
10
- | [autoplay](#autoplay) | `autoplay` | `number` | 7000 | The time in milliseconds between each slide change. Defaults to undefined. |
11
- | [loop](#loop) | `loop` | `boolean` | false | If true, the slideshow will loop back to the first slide after reaching the last slide. Defaults to false. |
12
- | [pagination](#pagination) | `pagination` | `boolean` | false | If true, the slideshow will display pagination bullets for each slide. |
13
- | [slidesPerView](#slidesPerView) | `slidesPerView` | `string` | "auto" | The number of slides per view. Defaults to 1. |
14
- | [spaceBetweenSlides](#spaceBetweenSlides) | `spaceBetweenSlides` | `number` | 16 | The pixel distance between slides when multiple slides are in view. |
15
- | [variant](#variant) | `variant` | `string` | "'slidershow'" | 'slideshow': pagination indicators will be showing underneat with auto-play the progressbar<br />`slider`: prev/next button will show on hover and there will be no pagination indicator |
16
-
17
- ## Methods
18
-
19
- | Method | Type |
20
- |---------------------------|------------|
21
- | [handleHeaderSlotContent](#handleHeaderSlotContent) | `(): void` |
22
- | [initializeSwiper](#initializeSwiper) | `(): void` |
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. |
13
+ | [loop](#loop) | `loop` | `boolean` | false | If true, the slideshow will loop back to the first slide after reaching the last slide. |
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
+ | [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
+ | [pauseLabel](#pauseLabel) | `pauseLabel` | `string` | "Pause slideshow" | The aria-label for the pause button. |
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. |
23
21
  <!-- AURO-GENERATED-CONTENT:END -->
24
22
 
25
23
  ## API Examples
@@ -29,17 +27,23 @@
29
27
  <div class="exampleWrapper">
30
28
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
31
29
  <!-- The below content is automatically added from ./../apiExamples/basic.html -->
32
- <auro-slideshow loop pagination>
33
- <span slot="header">Slider Header</span>
34
- <span slot="subheader">Subheader</span>
35
- <img src="https://picsum.photos/200?random=0" style="height: 300px; width: 600px;" alt="Random insert 0">
36
- <div style="height: 300px; width: 500px; background-color: bisque;">Slide 2</div>
37
- <img src="https://picsum.photos/200?random=1" style="height: 300px; width: 200px;" alt="Random insert 1">
38
- <img src="https://picsum.photos/200?random=2" style="height: 300px; width: 300px;" alt="Random insert 2">
39
- <img src="https://picsum.photos/200?random=3" style="height: 300px; width: 500px;" alt="Random insert 3">
40
- <img src="https://picsum.photos/200?random=4" style="height: 300px; width: 400px;" alt="Random insert 4">
41
- <img src="https://picsum.photos/200?random=5" style="height: 300px; width: 300px;" alt="Random insert 5">
42
- </auro-slideshow>
30
+ <auro-slideshow pagination autoplay playOnInit loop>
31
+ <div style="height: 480px">
32
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=1" alt="Random image 1">
33
+ </div>
34
+ <div style="height: 480px">
35
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=2" alt="Random image 2">
36
+ </div>
37
+ <div style="height: 480px">
38
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=3" alt="Random image 3">
39
+ </div>
40
+ <div style="height: 480px">
41
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=4" alt="Random image 4">
42
+ </div>
43
+ <div style="height: 480px">
44
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=5" alt="Random image 5">
45
+ </div>
46
+ </auro-slideshow>
43
47
  <!-- AURO-GENERATED-CONTENT:END -->
44
48
  </div>
45
49
  <auro-accordion alignRight>
@@ -48,17 +52,23 @@
48
52
  <!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
49
53
 
50
54
  ```html
51
- <auro-slideshow loop pagination>
52
- <span slot="header">Slider Header</span>
53
- <span slot="subheader">Subheader</span>
54
- <img src="https://picsum.photos/200?random=0" style="height: 300px; width: 600px;" alt="Random insert 0">
55
- <div style="height: 300px; width: 500px; background-color: bisque;">Slide 2</div>
56
- <img src="https://picsum.photos/200?random=1" style="height: 300px; width: 200px;" alt="Random insert 1">
57
- <img src="https://picsum.photos/200?random=2" style="height: 300px; width: 300px;" alt="Random insert 2">
58
- <img src="https://picsum.photos/200?random=3" style="height: 300px; width: 500px;" alt="Random insert 3">
59
- <img src="https://picsum.photos/200?random=4" style="height: 300px; width: 400px;" alt="Random insert 4">
60
- <img src="https://picsum.photos/200?random=5" style="height: 300px; width: 300px;" alt="Random insert 5">
61
- </auro-slideshow>
55
+ <auro-slideshow pagination autoplay playOnInit loop>
56
+ <div style="height: 480px">
57
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=1" alt="Random image 1">
58
+ </div>
59
+ <div style="height: 480px">
60
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=2" alt="Random image 2">
61
+ </div>
62
+ <div style="height: 480px">
63
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=3" alt="Random image 3">
64
+ </div>
65
+ <div style="height: 480px">
66
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=4" alt="Random image 4">
67
+ </div>
68
+ <div style="height: 480px">
69
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=5" alt="Random image 5">
70
+ </div>
71
+ </auro-slideshow>
62
72
  ```
63
73
  <!-- AURO-GENERATED-CONTENT:END -->
64
74
  </auro-accordion>
@@ -71,17 +81,23 @@ Explanation and use description.
71
81
  <div class="exampleWrapper">
72
82
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
73
83
  <!-- The below content is automatically added from ./../apiExamples/basic.html -->
74
- <auro-slideshow loop pagination>
75
- <span slot="header">Slider Header</span>
76
- <span slot="subheader">Subheader</span>
77
- <img src="https://picsum.photos/200?random=0" style="height: 300px; width: 600px;" alt="Random insert 0">
78
- <div style="height: 300px; width: 500px; background-color: bisque;">Slide 2</div>
79
- <img src="https://picsum.photos/200?random=1" style="height: 300px; width: 200px;" alt="Random insert 1">
80
- <img src="https://picsum.photos/200?random=2" style="height: 300px; width: 300px;" alt="Random insert 2">
81
- <img src="https://picsum.photos/200?random=3" style="height: 300px; width: 500px;" alt="Random insert 3">
82
- <img src="https://picsum.photos/200?random=4" style="height: 300px; width: 400px;" alt="Random insert 4">
83
- <img src="https://picsum.photos/200?random=5" style="height: 300px; width: 300px;" alt="Random insert 5">
84
- </auro-slideshow>
84
+ <auro-slideshow pagination autoplay playOnInit loop>
85
+ <div style="height: 480px">
86
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=1" alt="Random image 1">
87
+ </div>
88
+ <div style="height: 480px">
89
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=2" alt="Random image 2">
90
+ </div>
91
+ <div style="height: 480px">
92
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=3" alt="Random image 3">
93
+ </div>
94
+ <div style="height: 480px">
95
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=4" alt="Random image 4">
96
+ </div>
97
+ <div style="height: 480px">
98
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=5" alt="Random image 5">
99
+ </div>
100
+ </auro-slideshow>
85
101
  <!-- AURO-GENERATED-CONTENT:END -->
86
102
  </div>
87
103
  <auro-accordion alignRight>
@@ -90,17 +106,23 @@ Explanation and use description.
90
106
  <!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
91
107
 
92
108
  ```html
93
- <auro-slideshow loop pagination>
94
- <span slot="header">Slider Header</span>
95
- <span slot="subheader">Subheader</span>
96
- <img src="https://picsum.photos/200?random=0" style="height: 300px; width: 600px;" alt="Random insert 0">
97
- <div style="height: 300px; width: 500px; background-color: bisque;">Slide 2</div>
98
- <img src="https://picsum.photos/200?random=1" style="height: 300px; width: 200px;" alt="Random insert 1">
99
- <img src="https://picsum.photos/200?random=2" style="height: 300px; width: 300px;" alt="Random insert 2">
100
- <img src="https://picsum.photos/200?random=3" style="height: 300px; width: 500px;" alt="Random insert 3">
101
- <img src="https://picsum.photos/200?random=4" style="height: 300px; width: 400px;" alt="Random insert 4">
102
- <img src="https://picsum.photos/200?random=5" style="height: 300px; width: 300px;" alt="Random insert 5">
103
- </auro-slideshow>
109
+ <auro-slideshow pagination autoplay playOnInit loop>
110
+ <div style="height: 480px">
111
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=1" alt="Random image 1">
112
+ </div>
113
+ <div style="height: 480px">
114
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=2" alt="Random image 2">
115
+ </div>
116
+ <div style="height: 480px">
117
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=3" alt="Random image 3">
118
+ </div>
119
+ <div style="height: 480px">
120
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=4" alt="Random image 4">
121
+ </div>
122
+ <div style="height: 480px">
123
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=5" alt="Random image 5">
124
+ </div>
125
+ </auro-slideshow>
104
126
  ```
105
127
  <!-- AURO-GENERATED-CONTENT:END -->
106
128
  </auro-accordion>
@@ -113,17 +135,23 @@ Explanation and use description.
113
135
  <div class="exampleWrapper">
114
136
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
115
137
  <!-- The below content is automatically added from ./../apiExamples/basic.html -->
116
- <auro-slideshow loop pagination>
117
- <span slot="header">Slider Header</span>
118
- <span slot="subheader">Subheader</span>
119
- <img src="https://picsum.photos/200?random=0" style="height: 300px; width: 600px;" alt="Random insert 0">
120
- <div style="height: 300px; width: 500px; background-color: bisque;">Slide 2</div>
121
- <img src="https://picsum.photos/200?random=1" style="height: 300px; width: 200px;" alt="Random insert 1">
122
- <img src="https://picsum.photos/200?random=2" style="height: 300px; width: 300px;" alt="Random insert 2">
123
- <img src="https://picsum.photos/200?random=3" style="height: 300px; width: 500px;" alt="Random insert 3">
124
- <img src="https://picsum.photos/200?random=4" style="height: 300px; width: 400px;" alt="Random insert 4">
125
- <img src="https://picsum.photos/200?random=5" style="height: 300px; width: 300px;" alt="Random insert 5">
126
- </auro-slideshow>
138
+ <auro-slideshow pagination autoplay playOnInit loop>
139
+ <div style="height: 480px">
140
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=1" alt="Random image 1">
141
+ </div>
142
+ <div style="height: 480px">
143
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=2" alt="Random image 2">
144
+ </div>
145
+ <div style="height: 480px">
146
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=3" alt="Random image 3">
147
+ </div>
148
+ <div style="height: 480px">
149
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=4" alt="Random image 4">
150
+ </div>
151
+ <div style="height: 480px">
152
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=5" alt="Random image 5">
153
+ </div>
154
+ </auro-slideshow>
127
155
  <!-- AURO-GENERATED-CONTENT:END -->
128
156
  </div>
129
157
  <auro-accordion alignRight>
@@ -132,17 +160,23 @@ Explanation and use description.
132
160
  <!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
133
161
 
134
162
  ```html
135
- <auro-slideshow loop pagination>
136
- <span slot="header">Slider Header</span>
137
- <span slot="subheader">Subheader</span>
138
- <img src="https://picsum.photos/200?random=0" style="height: 300px; width: 600px;" alt="Random insert 0">
139
- <div style="height: 300px; width: 500px; background-color: bisque;">Slide 2</div>
140
- <img src="https://picsum.photos/200?random=1" style="height: 300px; width: 200px;" alt="Random insert 1">
141
- <img src="https://picsum.photos/200?random=2" style="height: 300px; width: 300px;" alt="Random insert 2">
142
- <img src="https://picsum.photos/200?random=3" style="height: 300px; width: 500px;" alt="Random insert 3">
143
- <img src="https://picsum.photos/200?random=4" style="height: 300px; width: 400px;" alt="Random insert 4">
144
- <img src="https://picsum.photos/200?random=5" style="height: 300px; width: 300px;" alt="Random insert 5">
145
- </auro-slideshow>
163
+ <auro-slideshow pagination autoplay playOnInit loop>
164
+ <div style="height: 480px">
165
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=1" alt="Random image 1">
166
+ </div>
167
+ <div style="height: 480px">
168
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=2" alt="Random image 2">
169
+ </div>
170
+ <div style="height: 480px">
171
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=3" alt="Random image 3">
172
+ </div>
173
+ <div style="height: 480px">
174
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=4" alt="Random image 4">
175
+ </div>
176
+ <div style="height: 480px">
177
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=5" alt="Random image 5">
178
+ </div>
179
+ </auro-slideshow>
146
180
  ```
147
181
  <!-- AURO-GENERATED-CONTENT:END -->
148
182
  </auro-accordion>
@@ -155,17 +189,23 @@ Explanation and use description.
155
189
  <div class="exampleWrapper">
156
190
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
157
191
  <!-- The below content is automatically added from ./../apiExamples/basic.html -->
158
- <auro-slideshow loop pagination>
159
- <span slot="header">Slider Header</span>
160
- <span slot="subheader">Subheader</span>
161
- <img src="https://picsum.photos/200?random=0" style="height: 300px; width: 600px;" alt="Random insert 0">
162
- <div style="height: 300px; width: 500px; background-color: bisque;">Slide 2</div>
163
- <img src="https://picsum.photos/200?random=1" style="height: 300px; width: 200px;" alt="Random insert 1">
164
- <img src="https://picsum.photos/200?random=2" style="height: 300px; width: 300px;" alt="Random insert 2">
165
- <img src="https://picsum.photos/200?random=3" style="height: 300px; width: 500px;" alt="Random insert 3">
166
- <img src="https://picsum.photos/200?random=4" style="height: 300px; width: 400px;" alt="Random insert 4">
167
- <img src="https://picsum.photos/200?random=5" style="height: 300px; width: 300px;" alt="Random insert 5">
168
- </auro-slideshow>
192
+ <auro-slideshow pagination autoplay playOnInit loop>
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>
169
209
  <!-- AURO-GENERATED-CONTENT:END -->
170
210
  </div>
171
211
  <auro-accordion alignRight>
@@ -174,17 +214,23 @@ Explanation and use description.
174
214
  <!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
175
215
 
176
216
  ```html
177
- <auro-slideshow loop pagination>
178
- <span slot="header">Slider Header</span>
179
- <span slot="subheader">Subheader</span>
180
- <img src="https://picsum.photos/200?random=0" style="height: 300px; width: 600px;" alt="Random insert 0">
181
- <div style="height: 300px; width: 500px; background-color: bisque;">Slide 2</div>
182
- <img src="https://picsum.photos/200?random=1" style="height: 300px; width: 200px;" alt="Random insert 1">
183
- <img src="https://picsum.photos/200?random=2" style="height: 300px; width: 300px;" alt="Random insert 2">
184
- <img src="https://picsum.photos/200?random=3" style="height: 300px; width: 500px;" alt="Random insert 3">
185
- <img src="https://picsum.photos/200?random=4" style="height: 300px; width: 400px;" alt="Random insert 4">
186
- <img src="https://picsum.photos/200?random=5" style="height: 300px; width: 300px;" alt="Random insert 5">
187
- </auro-slideshow>
217
+ <auro-slideshow pagination autoplay playOnInit loop>
218
+ <div style="height: 480px">
219
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=1" alt="Random image 1">
220
+ </div>
221
+ <div style="height: 480px">
222
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=2" alt="Random image 2">
223
+ </div>
224
+ <div style="height: 480px">
225
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=3" alt="Random image 3">
226
+ </div>
227
+ <div style="height: 480px">
228
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=4" alt="Random image 4">
229
+ </div>
230
+ <div style="height: 480px">
231
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=5" alt="Random image 5">
232
+ </div>
233
+ </auro-slideshow>
188
234
  ```
189
235
  <!-- AURO-GENERATED-CONTENT:END -->
190
236
  </auro-accordion>
@@ -197,17 +243,23 @@ Explanation and use description.
197
243
  <div class="exampleWrapper">
198
244
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
199
245
  <!-- The below content is automatically added from ./../apiExamples/basic.html -->
200
- <auro-slideshow loop pagination>
201
- <span slot="header">Slider Header</span>
202
- <span slot="subheader">Subheader</span>
203
- <img src="https://picsum.photos/200?random=0" style="height: 300px; width: 600px;" alt="Random insert 0">
204
- <div style="height: 300px; width: 500px; background-color: bisque;">Slide 2</div>
205
- <img src="https://picsum.photos/200?random=1" style="height: 300px; width: 200px;" alt="Random insert 1">
206
- <img src="https://picsum.photos/200?random=2" style="height: 300px; width: 300px;" alt="Random insert 2">
207
- <img src="https://picsum.photos/200?random=3" style="height: 300px; width: 500px;" alt="Random insert 3">
208
- <img src="https://picsum.photos/200?random=4" style="height: 300px; width: 400px;" alt="Random insert 4">
209
- <img src="https://picsum.photos/200?random=5" style="height: 300px; width: 300px;" alt="Random insert 5">
210
- </auro-slideshow>
246
+ <auro-slideshow pagination autoplay playOnInit loop>
247
+ <div style="height: 480px">
248
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=1" alt="Random image 1">
249
+ </div>
250
+ <div style="height: 480px">
251
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=2" alt="Random image 2">
252
+ </div>
253
+ <div style="height: 480px">
254
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=3" alt="Random image 3">
255
+ </div>
256
+ <div style="height: 480px">
257
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=4" alt="Random image 4">
258
+ </div>
259
+ <div style="height: 480px">
260
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=5" alt="Random image 5">
261
+ </div>
262
+ </auro-slideshow>
211
263
  <!-- AURO-GENERATED-CONTENT:END -->
212
264
  </div>
213
265
  <auro-accordion alignRight>
@@ -216,17 +268,23 @@ Explanation and use description.
216
268
  <!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
217
269
 
218
270
  ```html
219
- <auro-slideshow loop pagination>
220
- <span slot="header">Slider Header</span>
221
- <span slot="subheader">Subheader</span>
222
- <img src="https://picsum.photos/200?random=0" style="height: 300px; width: 600px;" alt="Random insert 0">
223
- <div style="height: 300px; width: 500px; background-color: bisque;">Slide 2</div>
224
- <img src="https://picsum.photos/200?random=1" style="height: 300px; width: 200px;" alt="Random insert 1">
225
- <img src="https://picsum.photos/200?random=2" style="height: 300px; width: 300px;" alt="Random insert 2">
226
- <img src="https://picsum.photos/200?random=3" style="height: 300px; width: 500px;" alt="Random insert 3">
227
- <img src="https://picsum.photos/200?random=4" style="height: 300px; width: 400px;" alt="Random insert 4">
228
- <img src="https://picsum.photos/200?random=5" style="height: 300px; width: 300px;" alt="Random insert 5">
229
- </auro-slideshow>
271
+ <auro-slideshow pagination autoplay playOnInit loop>
272
+ <div style="height: 480px">
273
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=1" alt="Random image 1">
274
+ </div>
275
+ <div style="height: 480px">
276
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=2" alt="Random image 2">
277
+ </div>
278
+ <div style="height: 480px">
279
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=3" alt="Random image 3">
280
+ </div>
281
+ <div style="height: 480px">
282
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=4" alt="Random image 4">
283
+ </div>
284
+ <div style="height: 480px">
285
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=5" alt="Random image 5">
286
+ </div>
287
+ </auro-slideshow>
230
288
  ```
231
289
  <!-- AURO-GENERATED-CONTENT:END -->
232
290
  </auro-accordion>
@@ -239,17 +297,23 @@ Explanation and use description.
239
297
  <div class="exampleWrapper">
240
298
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
241
299
  <!-- The below content is automatically added from ./../apiExamples/basic.html -->
242
- <auro-slideshow loop pagination>
243
- <span slot="header">Slider Header</span>
244
- <span slot="subheader">Subheader</span>
245
- <img src="https://picsum.photos/200?random=0" style="height: 300px; width: 600px;" alt="Random insert 0">
246
- <div style="height: 300px; width: 500px; background-color: bisque;">Slide 2</div>
247
- <img src="https://picsum.photos/200?random=1" style="height: 300px; width: 200px;" alt="Random insert 1">
248
- <img src="https://picsum.photos/200?random=2" style="height: 300px; width: 300px;" alt="Random insert 2">
249
- <img src="https://picsum.photos/200?random=3" style="height: 300px; width: 500px;" alt="Random insert 3">
250
- <img src="https://picsum.photos/200?random=4" style="height: 300px; width: 400px;" alt="Random insert 4">
251
- <img src="https://picsum.photos/200?random=5" style="height: 300px; width: 300px;" alt="Random insert 5">
252
- </auro-slideshow>
300
+ <auro-slideshow pagination autoplay playOnInit loop>
301
+ <div style="height: 480px">
302
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=1" alt="Random image 1">
303
+ </div>
304
+ <div style="height: 480px">
305
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=2" alt="Random image 2">
306
+ </div>
307
+ <div style="height: 480px">
308
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=3" alt="Random image 3">
309
+ </div>
310
+ <div style="height: 480px">
311
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=4" alt="Random image 4">
312
+ </div>
313
+ <div style="height: 480px">
314
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=5" alt="Random image 5">
315
+ </div>
316
+ </auro-slideshow>
253
317
  <!-- AURO-GENERATED-CONTENT:END -->
254
318
  </div>
255
319
  <auro-accordion alignRight>
@@ -258,17 +322,23 @@ Explanation and use description.
258
322
  <!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
259
323
 
260
324
  ```html
261
- <auro-slideshow loop pagination>
262
- <span slot="header">Slider Header</span>
263
- <span slot="subheader">Subheader</span>
264
- <img src="https://picsum.photos/200?random=0" style="height: 300px; width: 600px;" alt="Random insert 0">
265
- <div style="height: 300px; width: 500px; background-color: bisque;">Slide 2</div>
266
- <img src="https://picsum.photos/200?random=1" style="height: 300px; width: 200px;" alt="Random insert 1">
267
- <img src="https://picsum.photos/200?random=2" style="height: 300px; width: 300px;" alt="Random insert 2">
268
- <img src="https://picsum.photos/200?random=3" style="height: 300px; width: 500px;" alt="Random insert 3">
269
- <img src="https://picsum.photos/200?random=4" style="height: 300px; width: 400px;" alt="Random insert 4">
270
- <img src="https://picsum.photos/200?random=5" style="height: 300px; width: 300px;" alt="Random insert 5">
271
- </auro-slideshow>
325
+ <auro-slideshow pagination autoplay playOnInit loop>
326
+ <div style="height: 480px">
327
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=1" alt="Random image 1">
328
+ </div>
329
+ <div style="height: 480px">
330
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=2" alt="Random image 2">
331
+ </div>
332
+ <div style="height: 480px">
333
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=3" alt="Random image 3">
334
+ </div>
335
+ <div style="height: 480px">
336
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=4" alt="Random image 4">
337
+ </div>
338
+ <div style="height: 480px">
339
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=5" alt="Random image 5">
340
+ </div>
341
+ </auro-slideshow>
272
342
  ```
273
343
  <!-- AURO-GENERATED-CONTENT:END -->
274
344
  </auro-accordion>