README
Media Slideshow Component
<media-slideshow>
is a Web Component that makes a slideshow out of a whitespace-separated list of urls to images and/or videos.
Installation
Script tag
- Put this script tag
<script src='https://unpkg.com/media-slideshow-component/dist/mediaslideshowcomponent.js'></script>
in the head of your index.html - Then you can use the element anywhere in your template, JSX, html etc.
Node Modules
- Run
npm install media-slideshow-component --save
- Put this script tag
<script src='node_modules/media-slideshow-component/dist/mediaslideshowcomponent.js'></script>
in the head of your index.html - Then you can use the element anywhere in your template, JSX, html etc.
In a stencil-starter app
- Run
npm install media-slideshow-component --save
- Add an import to the npm packages
import media-slideshow-component;
- Then you can use the element anywhere in your template, JSX, html etc.
As part of another stencil component
- Run
npm install media-slideshow-component --save
- Add
import 'media-slideshow-component';
to the components that need it - In your render method, add this line before return:
[<media-slideshow></media-slideshow>];
Usage
Simply place the <media-slideshow>
element anywhere on your page. It will automatically take up the space of it's parent element and start showing the provided urls in a slideshow immediately.
<media-slideshow source-urls="https://picsum.photos/480/640
https://picsum.photos/640/480
https://file-examples.com/wp-content/uploads/2017/04/file_example_MP4_480_1_5MG.mp4
https://picsum.photos/100/200
https://picsum.photos/1900/1200
https://file-examples.com/wp-content/uploads/2017/04/file_example_MP4_1280_10MG.mp4
https://picsum.photos/300/1200
https://picsum.photos/300/300">
</media-slideshow>
Below is an overview of all the available properties on the <media-slideshow>
element. See and play around with the above example here.
Properties
Property | Attribute | Description | Type | Default |
---|---|---|---|---|
fit |
fit |
(optional) The kind of "object-fit" to use for the images/videos. Can be contian, cover, fill, none, scale-down or pan. | string |
"pan" |
hideControlsTime |
hide-controls-time |
(optional) The number of seconds of inaction after which the controls are hidden. Set to 0 to always hide the controls. Set to Infinity to never hide them. | number |
4 |
onexit |
onexit |
(optional) Set to a value to make the exit button appear in the controls. Accepted values are a url to navigate to or a callback function to call when exit is clicked. | any |
null |
panMinVisible |
pan-min-visible |
(optional) The minimum percentage of the media surface that is garanteed to be visible at any point during the panning. | number |
80 |
repeat |
repeat |
(optional) Initial value of the repeat button. If true, the slideshow will loop back to the beginning after the last slide. | boolean |
true |
slideBufferSize |
slide-buffer-size |
(optional) The number of extra slides that are loading in the background, excluding the current and previous slides. | number |
3 |
slideTransitionDuration |
slide-transition-duration |
(optional) The number of seconds the transition from one slide to another takes. | number |
0.5 |
sourceUrls |
source-urls |
The source urls of all the media (images/videos) in this slideshow. Accepts an array of strings when set from code, or a whitespace-separated list of urls (no quotes) when using the attribute directly from html. | string \| string[] |
undefined |
speedOneSlideTime |
speed-one-slide-time |
(optional) The number of seconds a slide is shown on speed 1. | number |
5 |
speedThreeSlideTime |
speed-three-slide-time |
(optional) The number of seconds a slide is shown on speed 3. | number |
1.5 |
speedTwoSlideTime |
speed-two-slide-time |
(optional) The number of seconds a slide is shown on speed 2. | number |
3 |