@aurodesignsystem-dev/auro-carousel 0.0.0-pr93.1 → 0.0.0-pr94.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 (13) hide show
  1. package/README.md +79 -68
  2. package/demo/api.html +2 -2
  3. package/demo/api.js +1 -1
  4. package/demo/api.md +133 -163
  5. package/demo/auro-carousel.min.js +151 -1421
  6. package/demo/index.html +3 -4
  7. package/demo/index.md +22 -300
  8. package/dist/auro-carousel-D1ntQpGY.js +121 -0
  9. package/dist/index.d.ts +209 -105
  10. package/dist/index.js +1 -1
  11. package/dist/registered.js +1 -1
  12. package/package.json +20 -12
  13. package/dist/auro-carousel-Cxfzo_Ed.js +0 -98
package/demo/index.html CHANGED
@@ -34,7 +34,7 @@
34
34
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
35
35
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
36
36
  </head>
37
- <body>
37
+ <body class="auro-markdown">
38
38
  <main></main>
39
39
  <script type="module">
40
40
  import 'https://cdn.jsdelivr.net/npm/marked@latest/marked.min.js';
@@ -54,9 +54,8 @@
54
54
  initExamples();
55
55
  </script>
56
56
 
57
- <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
58
-
59
57
  <!-- If additional elements are needed for the demo, add them here. -->
60
- <script src="https://unpkg.com/@aurodesignsystem/auro-pane@latest/dist/auro-pane__bundled.js" type="module"></script>
58
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/+esm" type="module"></script>
59
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-pane@latest/+esm" type="module"></script>
61
60
  </body>
62
61
  </html>
package/demo/index.md CHANGED
@@ -1,18 +1,18 @@
1
1
  <!--
2
- The index.md file is a compiled document. No edits should be made directly to this file.
3
- README.md is created by running `npm run build:docs`.
4
- This file is generated based on a template fetched from `./docs/partials/index.md`
2
+ THIS PAGE'S CONTENT SHOULD BE KEPT MINIMAL.
3
+ ONLY ADD EXAMPLES THAT ARE TRULY NECESSARY FOR THE INDEX PAGE — THE BASIC EXAMPLE IS USUALLY ENOUGH.
4
+ ALL OTHER EXAMPLES SHOULD GO IN THE API DOCUMENTATION.
5
5
  -->
6
6
 
7
- # Carousel
8
-
7
+ # Carousel
8
+
9
9
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/description.md) -->
10
10
  <!-- The below content is automatically added from ./../docs/partials/description.md -->
11
11
  `<auro-carousel>` is a [HTML custom element](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) for the purpose of displaying a group of elements in a scrollable container.
12
12
  <!-- AURO-GENERATED-CONTENT:END -->
13
13
 
14
- ## auro-carousel use cases
15
-
14
+ ## Use Cases
15
+
16
16
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/useCases.md) -->
17
17
  <!-- The below content is automatically added from ./../docs/partials/useCases.md -->
18
18
  The `<auro-carousel>` element should be used in situations where users may:
@@ -21,331 +21,53 @@ The `<auro-carousel>` element should be used in situations where users may:
21
21
  * Scroll through multiple images
22
22
  <!-- AURO-GENERATED-CONTENT:END -->
23
23
 
24
- ## Examples
25
-
26
- ### Basic
27
-
28
- The following example illustrates a the default behavior of the carousel element. Notice how the toggle buttons on the left and the right only appear when there are enough nodes in that direction. This element is fully responsive whereas the l/r toggles will not appear on a mobile device and finger-swipe will operate as expected.
24
+ ## Example(s)
29
25
 
26
+ ### Basic
27
+
30
28
  <div class="exampleWrapper">
31
29
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
32
30
  <!-- The below content is automatically added from ./../apiExamples/basic.html -->
33
- <auro-carousel centerSelected>
31
+ <auro-carousel>
34
32
  <auro-pane date="2020-10-10" price="$435"></auro-pane>
35
33
  <auro-pane date="2020-10-11" price="$435"></auro-pane>
36
34
  <auro-pane date="2020-10-12" price="$435"></auro-pane>
37
- <auro-pane date="2020-10-13" selected price="$666"></auro-pane>
38
- <auro-pane date="2020-10-14" price="$435" disabled></auro-pane>
35
+ <auro-pane date="2020-10-13" price="$435"></auro-pane>
36
+ <auro-pane date="2020-10-14" price="$435"></auro-pane>
39
37
  <auro-pane date="2020-10-15" price="$435"></auro-pane>
40
38
  <auro-pane date="2020-10-16" price="$435"></auro-pane>
41
39
  <auro-pane date="2020-10-17" price="$435"></auro-pane>
42
- <auro-pane date="2020-10-18" price="$435"></auro-pane>
40
+ <auro-pane date="2020-10-18" selected price="$435"></auro-pane>
43
41
  <auro-pane date="2020-10-19" price="$435"></auro-pane>
44
- </auro-carousel>
45
- <!-- AURO-GENERATED-CONTENT:END -->
46
- </div>
47
- <auro-accordion alignRight>
48
- <span slot="trigger">See code</span>
49
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
50
- <!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
51
-
52
- ```html
53
- <auro-carousel centerSelected>
54
- <auro-pane date="2020-10-10" price="$435"></auro-pane>
55
- <auro-pane date="2020-10-11" price="$435"></auro-pane>
56
- <auro-pane date="2020-10-12" price="$435"></auro-pane>
57
- <auro-pane date="2020-10-13" selected price="$666"></auro-pane>
58
- <auro-pane date="2020-10-14" price="$435" disabled></auro-pane>
59
- <auro-pane date="2020-10-15" price="$435"></auro-pane>
60
- <auro-pane date="2020-10-16" price="$435"></auro-pane>
61
- <auro-pane date="2020-10-17" price="$435"></auro-pane>
62
- <auro-pane date="2020-10-18" price="$435"></auro-pane>
63
- <auro-pane date="2020-10-19" price="$435"></auro-pane>
64
- </auro-carousel>
65
- ```
66
- <!-- AURO-GENERATED-CONTENT:END -->
67
- </auro-accordion>
68
-
69
- ### Carousel of images w/custom scroll distance
70
-
71
- The following example illustrates a the default behavior of the carousel element. Notice how the toggle buttons on the left and the right only appear when there are enough nodes in that direction. This element is fully responsive whereas the l/r toggles will not appear on a mobile device and finger-swipe will operate as expected.
72
-
73
- <div class="exampleWrapper">
74
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/images.html) -->
75
- <!-- The below content is automatically added from ./../apiExamples/images.html -->
76
- <auro-carousel label="Images" scrolldistance="600">
77
- <img src="https://picsum.photos/200?random=0" alt="Random insert 0">
78
- <img src="https://picsum.photos/200?random=1" alt="Random insert 1">
79
- <img src="https://picsum.photos/200?random=2" alt="Random insert 2">
80
- <img src="https://picsum.photos/200?random=3" alt="Random insert 3">
81
- <img src="https://picsum.photos/200?random=4" alt="Random insert 4">
82
- <img src="https://picsum.photos/200?random=5" alt="Random insert 5">
83
- <img src="https://picsum.photos/200?random=6" alt="Random insert 6">
84
- <img src="https://picsum.photos/200?random=7" alt="Random insert 7">
85
- <img src="https://picsum.photos/200?random=8" alt="Random insert 8">
86
- <img src="https://picsum.photos/200?random=9" alt="Random insert 9">
87
- <img src="https://picsum.photos/200?random=10" alt="Random insert 10">
88
- <img src="https://picsum.photos/200?random=11" alt="Random insert 11">
89
- <img src="https://picsum.photos/200?random=12" alt="Random insert 12">
90
- <img src="https://picsum.photos/200?random=13" alt="Random insert 13">
91
- <img src="https://picsum.photos/200?random=14" alt="Random insert 14">
92
- <img src="https://picsum.photos/200?random=15" alt="Random insert 15">
93
- <img src="https://picsum.photos/200?random=16" alt="Random insert 16">
94
- <img src="https://picsum.photos/200?random=17" alt="Random insert 17">
95
- <img src="https://picsum.photos/200?random=18" alt="Random insert 18">
96
- <img src="https://picsum.photos/200?random=19" alt="Random insert 19">
97
- <img src="https://picsum.photos/200?random=20" alt="Random insert 20">
98
- <img src="https://picsum.photos/200?random=21" alt="Random insert 21">
99
- <img src="https://picsum.photos/200?random=22" alt="Random insert 22">
100
- <img src="https://picsum.photos/200?random=23" alt="Random insert 23">
101
- <img src="https://picsum.photos/200?random=24" alt="Random insert 24">
102
- <img src="https://picsum.photos/200?random=25" alt="Random insert 25">
103
- <img src="https://picsum.photos/200?random=26" alt="Random insert 26">
104
- <img src="https://picsum.photos/200?random=27" alt="Random insert 27">
105
- <img src="https://picsum.photos/200?random=28" alt="Random insert 28">
106
- <img src="https://picsum.photos/200?random=29" alt="Random insert 29">
107
- <img src="https://picsum.photos/200?random=30" alt="Random insert 30">
108
- <img src="https://picsum.photos/200?random=31" alt="Random insert 31">
109
- <img src="https://picsum.photos/200?random=32" alt="Random insert 32">
110
- <img src="https://picsum.photos/200?random=33" alt="Random insert 33">
111
- <img src="https://picsum.photos/200?random=34" alt="Random insert 34">
112
- <img src="https://picsum.photos/200?random=35" alt="Random insert 35">
113
- <img src="https://picsum.photos/200?random=36" alt="Random insert 36">
114
- <img src="https://picsum.photos/200?random=37" alt="Random insert 37">
115
- <img src="https://picsum.photos/200?random=38" alt="Random insert 38">
116
- <img src="https://picsum.photos/200?random=39" alt="Random insert 39">
117
- <img src="https://picsum.photos/200?random=40" alt="Random insert 40">
118
- <img src="https://picsum.photos/200?random=41" alt="Random insert 41">
119
- <img src="https://picsum.photos/200?random=42" alt="Random insert 42">
120
- <img src="https://picsum.photos/200?random=43" alt="Random insert 43">
121
- <img src="https://picsum.photos/200?random=44" alt="Random insert 44">
122
- <img src="https://picsum.photos/200?random=45" alt="Random insert 45">
123
- <img src="https://picsum.photos/200?random=46" alt="Random insert 46">
124
- <img src="https://picsum.photos/200?random=47" alt="Random insert 47">
125
- <img src="https://picsum.photos/200?random=48" alt="Random insert 48">
126
- <img src="https://picsum.photos/200?random=49" alt="Random insert 49">
127
- <img src="https://picsum.photos/200?random=50" alt="Random insert 50">
128
- <img src="https://picsum.photos/200?random=51" alt="Random insert 51">
129
- <img src="https://picsum.photos/200?random=52" alt="Random insert 52">
130
- <img src="https://picsum.photos/200?random=53" alt="Random insert 53">
131
- <img src="https://picsum.photos/200?random=54" alt="Random insert 54">
132
- <img src="https://picsum.photos/200?random=55" alt="Random insert 55">
133
- <img src="https://picsum.photos/200?random=56" alt="Random insert 56">
134
- <img src="https://picsum.photos/200?random=57" alt="Random insert 57">
135
- <img src="https://picsum.photos/200?random=58" alt="Random insert 58">
136
- <img src="https://picsum.photos/200?random=59" alt="Random insert 59">
137
- <img src="https://picsum.photos/200?random=60" alt="Random insert 60">
138
- <img src="https://picsum.photos/200?random=61" alt="Random insert 61">
139
- <img src="https://picsum.photos/200?random=62" alt="Random insert 62">
140
- <img src="https://picsum.photos/200?random=63" alt="Random insert 63">
141
- <img src="https://picsum.photos/200?random=64" alt="Random insert 64">
142
- <img src="https://picsum.photos/200?random=65" alt="Random insert 65">
143
- <img src="https://picsum.photos/200?random=66" alt="Random insert 66">
144
- <img src="https://picsum.photos/200?random=67" alt="Random insert 67">
145
- <img src="https://picsum.photos/200?random=68" alt="Random insert 68">
146
- <img src="https://picsum.photos/200?random=69" alt="Random insert 69">
147
- <img src="https://picsum.photos/200?random=70" alt="Random insert 70">
148
- <img src="https://picsum.photos/200?random=71" alt="Random insert 71">
149
- <img src="https://picsum.photos/200?random=72" alt="Random insert 72">
150
- <img src="https://picsum.photos/200?random=73" alt="Random insert 73">
151
- <img src="https://picsum.photos/200?random=74" alt="Random insert 74">
152
- <img src="https://picsum.photos/200?random=75" alt="Random insert 75">
153
- <img src="https://picsum.photos/200?random=76" alt="Random insert 76">
154
- <img src="https://picsum.photos/200?random=77" alt="Random insert 77">
155
- <img src="https://picsum.photos/200?random=78" alt="Random insert 78">
156
- <img src="https://picsum.photos/200?random=79" alt="Random insert 79">
157
- <img src="https://picsum.photos/200?random=80" alt="Random insert 80">
158
- <img src="https://picsum.photos/200?random=81" alt="Random insert 81">
159
- <img src="https://picsum.photos/200?random=82" alt="Random insert 82">
160
- <img src="https://picsum.photos/200?random=83" alt="Random insert 83">
161
- <img src="https://picsum.photos/200?random=84" alt="Random insert 84">
162
- <img src="https://picsum.photos/200?random=85" alt="Random insert 85">
163
- <img src="https://picsum.photos/200?random=86" alt="Random insert 86">
164
- <img src="https://picsum.photos/200?random=87" alt="Random insert 87">
165
- <img src="https://picsum.photos/200?random=88" alt="Random insert 88">
166
- <img src="https://picsum.photos/200?random=89" alt="Random insert 89">
167
- <img src="https://picsum.photos/200?random=90" alt="Random insert 90">
168
- <img src="https://picsum.photos/200?random=91" alt="Random insert 91">
169
- <img src="https://picsum.photos/200?random=92" alt="Random insert 92">
170
- <img src="https://picsum.photos/200?random=93" alt="Random insert 93">
171
- <img src="https://picsum.photos/200?random=94" alt="Random insert 94">
172
- <img src="https://picsum.photos/200?random=95" alt="Random insert 95">
173
- <img src="https://picsum.photos/200?random=96" alt="Random insert 96">
174
- <img src="https://picsum.photos/200?random=97" alt="Random insert 97">
175
- <img src="https://picsum.photos/200?random=98" alt="Random insert 98">
176
- <img src="https://picsum.photos/200?random=99" alt="Random insert 99">
177
- </auro-carousel>
178
- <!-- AURO-GENERATED-CONTENT:END -->
179
- </div>
180
- <auro-accordion alignRight>
181
- <span slot="trigger">See code</span>
182
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/images.html) -->
183
- <!-- The below code snippet is automatically added from ./../apiExamples/images.html -->
184
-
185
- ```html
186
- <auro-carousel label="Images" scrolldistance="600">
187
- <img src="https://picsum.photos/200?random=0" alt="Random insert 0">
188
- <img src="https://picsum.photos/200?random=1" alt="Random insert 1">
189
- <img src="https://picsum.photos/200?random=2" alt="Random insert 2">
190
- <img src="https://picsum.photos/200?random=3" alt="Random insert 3">
191
- <img src="https://picsum.photos/200?random=4" alt="Random insert 4">
192
- <img src="https://picsum.photos/200?random=5" alt="Random insert 5">
193
- <img src="https://picsum.photos/200?random=6" alt="Random insert 6">
194
- <img src="https://picsum.photos/200?random=7" alt="Random insert 7">
195
- <img src="https://picsum.photos/200?random=8" alt="Random insert 8">
196
- <img src="https://picsum.photos/200?random=9" alt="Random insert 9">
197
- <img src="https://picsum.photos/200?random=10" alt="Random insert 10">
198
- <img src="https://picsum.photos/200?random=11" alt="Random insert 11">
199
- <img src="https://picsum.photos/200?random=12" alt="Random insert 12">
200
- <img src="https://picsum.photos/200?random=13" alt="Random insert 13">
201
- <img src="https://picsum.photos/200?random=14" alt="Random insert 14">
202
- <img src="https://picsum.photos/200?random=15" alt="Random insert 15">
203
- <img src="https://picsum.photos/200?random=16" alt="Random insert 16">
204
- <img src="https://picsum.photos/200?random=17" alt="Random insert 17">
205
- <img src="https://picsum.photos/200?random=18" alt="Random insert 18">
206
- <img src="https://picsum.photos/200?random=19" alt="Random insert 19">
207
- <img src="https://picsum.photos/200?random=20" alt="Random insert 20">
208
- <img src="https://picsum.photos/200?random=21" alt="Random insert 21">
209
- <img src="https://picsum.photos/200?random=22" alt="Random insert 22">
210
- <img src="https://picsum.photos/200?random=23" alt="Random insert 23">
211
- <img src="https://picsum.photos/200?random=24" alt="Random insert 24">
212
- <img src="https://picsum.photos/200?random=25" alt="Random insert 25">
213
- <img src="https://picsum.photos/200?random=26" alt="Random insert 26">
214
- <img src="https://picsum.photos/200?random=27" alt="Random insert 27">
215
- <img src="https://picsum.photos/200?random=28" alt="Random insert 28">
216
- <img src="https://picsum.photos/200?random=29" alt="Random insert 29">
217
- <img src="https://picsum.photos/200?random=30" alt="Random insert 30">
218
- <img src="https://picsum.photos/200?random=31" alt="Random insert 31">
219
- <img src="https://picsum.photos/200?random=32" alt="Random insert 32">
220
- <img src="https://picsum.photos/200?random=33" alt="Random insert 33">
221
- <img src="https://picsum.photos/200?random=34" alt="Random insert 34">
222
- <img src="https://picsum.photos/200?random=35" alt="Random insert 35">
223
- <img src="https://picsum.photos/200?random=36" alt="Random insert 36">
224
- <img src="https://picsum.photos/200?random=37" alt="Random insert 37">
225
- <img src="https://picsum.photos/200?random=38" alt="Random insert 38">
226
- <img src="https://picsum.photos/200?random=39" alt="Random insert 39">
227
- <img src="https://picsum.photos/200?random=40" alt="Random insert 40">
228
- <img src="https://picsum.photos/200?random=41" alt="Random insert 41">
229
- <img src="https://picsum.photos/200?random=42" alt="Random insert 42">
230
- <img src="https://picsum.photos/200?random=43" alt="Random insert 43">
231
- <img src="https://picsum.photos/200?random=44" alt="Random insert 44">
232
- <img src="https://picsum.photos/200?random=45" alt="Random insert 45">
233
- <img src="https://picsum.photos/200?random=46" alt="Random insert 46">
234
- <img src="https://picsum.photos/200?random=47" alt="Random insert 47">
235
- <img src="https://picsum.photos/200?random=48" alt="Random insert 48">
236
- <img src="https://picsum.photos/200?random=49" alt="Random insert 49">
237
- <img src="https://picsum.photos/200?random=50" alt="Random insert 50">
238
- <img src="https://picsum.photos/200?random=51" alt="Random insert 51">
239
- <img src="https://picsum.photos/200?random=52" alt="Random insert 52">
240
- <img src="https://picsum.photos/200?random=53" alt="Random insert 53">
241
- <img src="https://picsum.photos/200?random=54" alt="Random insert 54">
242
- <img src="https://picsum.photos/200?random=55" alt="Random insert 55">
243
- <img src="https://picsum.photos/200?random=56" alt="Random insert 56">
244
- <img src="https://picsum.photos/200?random=57" alt="Random insert 57">
245
- <img src="https://picsum.photos/200?random=58" alt="Random insert 58">
246
- <img src="https://picsum.photos/200?random=59" alt="Random insert 59">
247
- <img src="https://picsum.photos/200?random=60" alt="Random insert 60">
248
- <img src="https://picsum.photos/200?random=61" alt="Random insert 61">
249
- <img src="https://picsum.photos/200?random=62" alt="Random insert 62">
250
- <img src="https://picsum.photos/200?random=63" alt="Random insert 63">
251
- <img src="https://picsum.photos/200?random=64" alt="Random insert 64">
252
- <img src="https://picsum.photos/200?random=65" alt="Random insert 65">
253
- <img src="https://picsum.photos/200?random=66" alt="Random insert 66">
254
- <img src="https://picsum.photos/200?random=67" alt="Random insert 67">
255
- <img src="https://picsum.photos/200?random=68" alt="Random insert 68">
256
- <img src="https://picsum.photos/200?random=69" alt="Random insert 69">
257
- <img src="https://picsum.photos/200?random=70" alt="Random insert 70">
258
- <img src="https://picsum.photos/200?random=71" alt="Random insert 71">
259
- <img src="https://picsum.photos/200?random=72" alt="Random insert 72">
260
- <img src="https://picsum.photos/200?random=73" alt="Random insert 73">
261
- <img src="https://picsum.photos/200?random=74" alt="Random insert 74">
262
- <img src="https://picsum.photos/200?random=75" alt="Random insert 75">
263
- <img src="https://picsum.photos/200?random=76" alt="Random insert 76">
264
- <img src="https://picsum.photos/200?random=77" alt="Random insert 77">
265
- <img src="https://picsum.photos/200?random=78" alt="Random insert 78">
266
- <img src="https://picsum.photos/200?random=79" alt="Random insert 79">
267
- <img src="https://picsum.photos/200?random=80" alt="Random insert 80">
268
- <img src="https://picsum.photos/200?random=81" alt="Random insert 81">
269
- <img src="https://picsum.photos/200?random=82" alt="Random insert 82">
270
- <img src="https://picsum.photos/200?random=83" alt="Random insert 83">
271
- <img src="https://picsum.photos/200?random=84" alt="Random insert 84">
272
- <img src="https://picsum.photos/200?random=85" alt="Random insert 85">
273
- <img src="https://picsum.photos/200?random=86" alt="Random insert 86">
274
- <img src="https://picsum.photos/200?random=87" alt="Random insert 87">
275
- <img src="https://picsum.photos/200?random=88" alt="Random insert 88">
276
- <img src="https://picsum.photos/200?random=89" alt="Random insert 89">
277
- <img src="https://picsum.photos/200?random=90" alt="Random insert 90">
278
- <img src="https://picsum.photos/200?random=91" alt="Random insert 91">
279
- <img src="https://picsum.photos/200?random=92" alt="Random insert 92">
280
- <img src="https://picsum.photos/200?random=93" alt="Random insert 93">
281
- <img src="https://picsum.photos/200?random=94" alt="Random insert 94">
282
- <img src="https://picsum.photos/200?random=95" alt="Random insert 95">
283
- <img src="https://picsum.photos/200?random=96" alt="Random insert 96">
284
- <img src="https://picsum.photos/200?random=97" alt="Random insert 97">
285
- <img src="https://picsum.photos/200?random=98" alt="Random insert 98">
286
- <img src="https://picsum.photos/200?random=99" alt="Random insert 99">
287
- </auro-carousel>
288
- ```
289
- <!-- AURO-GENERATED-CONTENT:END -->
290
- </auro-accordion>
291
-
292
- ## Recommended Use and Version Control
293
-
294
- There are two important parts of every Auro component. The <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">class</a> and the custom element. The class is exported and then used as part of defining the Web Component. When importing this component as described in the <a href="#install">install</a> section, the class is imported and the `auro-carousel` custom element is defined automatically.
295
-
296
- To protect from versioning conflicts with other instances of the component being loaded, it is recommended to use our `AuroCarousel.register(name)` method and pass in a unique name.
297
-
298
- ```js
299
- import { AuroCarousel } from '@aurodesignsystem/auro-carousel/class';
300
-
301
- AuroCarousel.register('custom-carousel');
302
- ```
303
-
304
- This will create a new custom element that you can use in your HTML that will function identically to the `auro-carousel` element.
305
-
306
- <div class="exampleWrapper">
307
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/custom.html) -->
308
- <!-- The below content is automatically added from ./../apiExamples/custom.html -->
309
- <custom-carousel label="Flight options" scrollDistance="420" id="demo1">
310
- <auro-pane date="2020-10-10" price="$435"></auro-pane>
311
- <auro-pane date="2020-10-11" price="$435"></auro-pane>
312
- <auro-pane date="2020-10-12" price="$435"></auro-pane>
313
- <auro-pane date="2020-10-13" selected price="$435"></auro-pane>
314
- <auro-pane date="2020-10-14" price="$435" disabled></auro-pane>
315
- <auro-pane date="2020-10-15" price="$435"></auro-pane>
316
42
  <auro-pane date="2020-10-16" price="$435"></auro-pane>
317
43
  <auro-pane date="2020-10-17" price="$435"></auro-pane>
318
44
  <auro-pane date="2020-10-18" price="$435"></auro-pane>
319
45
  <auro-pane date="2020-10-19" price="$435"></auro-pane>
320
- <auro-pane date="2020-10-16" price="$435"></auro-pane>
321
- <auro-pane date="2020-10-17" price="$435"></auro-pane>
322
- <auro-pane date="2020-10-18" price="$435"></auro-pane>
323
- <auro-pane date="2020-10-19" price="$435"></auro-pane>
324
- </custom-carousel>
46
+ </auro-carousel>
325
47
  <!-- AURO-GENERATED-CONTENT:END -->
326
48
  </div>
327
49
  <auro-accordion alignRight>
328
50
  <span slot="trigger">See code</span>
329
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/custom.html) -->
330
- <!-- The below code snippet is automatically added from ./../apiExamples/custom.html -->
51
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
52
+ <!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
331
53
 
332
54
  ```html
333
- <custom-carousel label="Flight options" scrollDistance="420" id="demo1">
55
+ <auro-carousel>
334
56
  <auro-pane date="2020-10-10" price="$435"></auro-pane>
335
57
  <auro-pane date="2020-10-11" price="$435"></auro-pane>
336
58
  <auro-pane date="2020-10-12" price="$435"></auro-pane>
337
- <auro-pane date="2020-10-13" selected price="$435"></auro-pane>
338
- <auro-pane date="2020-10-14" price="$435" disabled></auro-pane>
59
+ <auro-pane date="2020-10-13" price="$435"></auro-pane>
60
+ <auro-pane date="2020-10-14" price="$435"></auro-pane>
339
61
  <auro-pane date="2020-10-15" price="$435"></auro-pane>
340
62
  <auro-pane date="2020-10-16" price="$435"></auro-pane>
341
63
  <auro-pane date="2020-10-17" price="$435"></auro-pane>
342
- <auro-pane date="2020-10-18" price="$435"></auro-pane>
64
+ <auro-pane date="2020-10-18" selected price="$435"></auro-pane>
343
65
  <auro-pane date="2020-10-19" price="$435"></auro-pane>
344
66
  <auro-pane date="2020-10-16" price="$435"></auro-pane>
345
67
  <auro-pane date="2020-10-17" price="$435"></auro-pane>
346
68
  <auro-pane date="2020-10-18" price="$435"></auro-pane>
347
69
  <auro-pane date="2020-10-19" price="$435"></auro-pane>
348
- </custom-carousel>
70
+ </auro-carousel>
349
71
  ```
350
72
  <!-- AURO-GENERATED-CONTENT:END -->
351
73
  </auro-accordion>