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 |