@aurodesignsystem-dev/auro-slideshow 0.0.0-pr44.0 → 0.0.0-pr44.2
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.
- package/README.md +9 -4
- package/demo/api.html +15 -7
- package/demo/auro-slideshow.min.js +61 -170
- package/demo/index.html +15 -7
- package/demo/index.md +9 -4
- package/dist/auro-slideshow-DI0QL9Nv.js +109 -0
- package/dist/index.d.ts +8 -8
- package/dist/index.js +1 -1
- package/dist/registered.js +1 -1
- package/package.json +12 -11
- package/dist/auro-slideshow-B4IdGoN3.js +0 -109
package/README.md
CHANGED
|
@@ -23,17 +23,22 @@ The following sections are editable by making changes to the following files:
|
|
|
23
23
|
<!-- The below content is automatically added from ./docs/partials/description.md -->
|
|
24
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
|
-
The `<auro-slideshow>` component is a wrapper element. All slides are slotted content and must be direct children of the component.
|
|
26
|
+
The `<auro-slideshow>` component is a wrapper element. All slides are slotted content and must be direct children of the component. Slides must have assigned `width` and `height` properties to display properly.
|
|
27
27
|
|
|
28
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
|
-
<!-- The below content is automatically added from ./docs/partials/readmeAddlInfo.md -->
|
|
31
|
+
<!-- The below content is automatically added from ./docs/partials/readmeAddlInfo.md -->
|
|
32
|
+
|
|
33
|
+
### Properties usage
|
|
34
|
+
|
|
32
35
|
`autoplay` and `autoScroll` are mutually exclusive properties and should not be used together on the same component instance.
|
|
33
36
|
|
|
34
|
-
|
|
37
|
+
Both `navigation` and `pagination` can be used together, but at least one must be used to give users a clear way to control the slides manually.
|
|
38
|
+
|
|
39
|
+
### Mobile behavior
|
|
35
40
|
|
|
36
|
-
|
|
41
|
+
On mobile devices, `autoScroll` and `navigation` controls are automatically disabled. Users can navigate the slideshow by swiping left or right.
|
|
37
42
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
38
43
|
|
|
39
44
|
## UI development browser support
|
package/demo/api.html
CHANGED
|
@@ -16,13 +16,21 @@
|
|
|
16
16
|
<head>
|
|
17
17
|
<meta charset="UTF-8" />
|
|
18
18
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
19
|
-
<title>Auro Web Component
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/auro-classic/CSSCustomProperties.css"
|
|
19
|
+
<title>Auro Web Component Demo | auro-slideshow</title>
|
|
20
|
+
|
|
21
|
+
<!-- Prism.js Stylesheet -->
|
|
22
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"/>
|
|
23
|
+
|
|
24
|
+
<!-- Legacy reference is still needed to support auro-slideshow's use of legacy token values at this time -->
|
|
25
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/legacy/auro-classic/CSSCustomProperties.css"/>
|
|
26
|
+
|
|
27
|
+
<!-- Design Token Alaska Theme -->
|
|
28
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/themes/alaska/CSSCustomProperties--alaska.min.css"/>
|
|
29
|
+
|
|
30
|
+
<!-- Webcore Stylesheet Alaska Theme -->
|
|
31
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
|
|
32
|
+
|
|
33
|
+
<!-- Demo Specific Styles -->
|
|
26
34
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
|
|
27
35
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
|
|
28
36
|
</head>
|