@aurodesignsystem-dev/auro-slideshow 0.0.0-pr18.1 → 0.0.0-pr19.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 (10) hide show
  1. package/README.md +42 -30
  2. package/demo/api.md +48 -248
  3. package/demo/auro-slideshow.min.js +3189 -5434
  4. package/demo/index.md +127 -43
  5. package/dist/auro-slideshow-DNIk7m2x.js +102 -0
  6. package/dist/index.d.ts +104 -155
  7. package/dist/index.js +1 -1
  8. package/dist/registered.js +1 -1
  9. package/package.json +10 -6
  10. 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.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,227 +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>
43
- <!-- AURO-GENERATED-CONTENT:END -->
44
- </div>
45
- <auro-accordion alignRight>
46
- <span slot="trigger">See code</span>
47
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
48
- <!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
49
-
50
- ```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>
62
- ```
63
- <!-- AURO-GENERATED-CONTENT:END -->
64
- </auro-accordion>
65
-
66
- ### Attribute Examples
67
-
68
- #### <a name="attributeName"></a>`attributeName`<a href="#" style="float: right; font-size: 1rem; font-weight: 100;">back to top</a>
69
- Explanation and use description.
70
-
71
- <div class="exampleWrapper">
72
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
73
- <!-- 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>
85
- <!-- AURO-GENERATED-CONTENT:END -->
86
- </div>
87
- <auro-accordion alignRight>
88
- <span slot="trigger">See code</span>
89
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
90
- <!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
91
-
92
- ```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>
104
- ```
105
- <!-- AURO-GENERATED-CONTENT:END -->
106
- </auro-accordion>
107
-
108
- ### Property Examples
109
-
110
- #### <a name="propertyName"></a>`propertyName`<a href="#" style="float: right; font-size: 1rem; font-weight: 100;">back to top</a>
111
- Explanation and use description.
112
-
113
- <div class="exampleWrapper">
114
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
115
- <!-- 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>
127
- <!-- AURO-GENERATED-CONTENT:END -->
128
- </div>
129
- <auro-accordion alignRight>
130
- <span slot="trigger">See code</span>
131
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
132
- <!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
133
-
134
- ```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>
146
- ```
147
- <!-- AURO-GENERATED-CONTENT:END -->
148
- </auro-accordion>
149
-
150
- ### Method Examples
151
-
152
- #### <a name="methodName"></a>`methodName`<a href="#" style="float: right; font-size: 1rem; font-weight: 100;">back to top</a>
153
- Explanation and use description.
154
-
155
- <div class="exampleWrapper">
156
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
157
- <!-- 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>
169
- <!-- AURO-GENERATED-CONTENT:END -->
170
- </div>
171
- <auro-accordion alignRight>
172
- <span slot="trigger">See code</span>
173
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
174
- <!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
175
-
176
- ```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>
188
- ```
189
- <!-- AURO-GENERATED-CONTENT:END -->
190
- </auro-accordion>
191
-
192
- ### Event Examples
193
-
194
- #### <a name="eventName"></a>`eventName`<a href="#" style="float: right; font-size: 1rem; font-weight: 100;">back to top</a>
195
- Explanation and use description.
196
-
197
- <div class="exampleWrapper">
198
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
199
- <!-- 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>
211
- <!-- AURO-GENERATED-CONTENT:END -->
212
- </div>
213
- <auro-accordion alignRight>
214
- <span slot="trigger">See code</span>
215
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
216
- <!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
217
-
218
- ```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>
230
- ```
231
- <!-- AURO-GENERATED-CONTENT:END -->
232
- </auro-accordion>
233
-
234
- ### Slot Examples
235
-
236
- #### <a name="slotName"></a>`slotName`<a href="#" style="float: right; font-size: 1rem; font-weight: 100;">back to top</a>
237
- Explanation and use description.
238
-
239
- <div class="exampleWrapper">
240
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
241
- <!-- 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>
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>
253
47
  <!-- AURO-GENERATED-CONTENT:END -->
254
48
  </div>
255
49
  <auro-accordion alignRight>
@@ -258,17 +52,23 @@ Explanation and use description.
258
52
  <!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
259
53
 
260
54
  ```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>
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>
272
72
  ```
273
73
  <!-- AURO-GENERATED-CONTENT:END -->
274
- </auro-accordion>
74
+ </auro-accordion>