BaseMediaCarousel
Component for browsing various file formats. Supports images, audio, video (currently HLS only), and PDF through dedicated viewers. For unknown formats, a preview image is shown when available, with an option to download the file.
Props
| Prop name | Description | Type | Values | Default |
|---|---|---|---|---|
| items | items to display in a swiper carousel array of objects with the following required properties: title string - the asset titlemediaUrl string - url of the medium to be displayedadditionally, type video also requires the following properties:mediaPosterUrl string - url of image for poster property in html5 video tagdisplaySize Object - set height and with from outside, needs to be an object with properties height and/or width.optional properties: additionalInfo string[] - additional info text below file name, an array of strings.downloadUrl string - url for downloading the filemediaType string - specify the media type - needs to be one of: image, video, audio, pdf. Caveat: if media type is not specified it is automatically determined from file ending!orientation number - define how the image should be rotated (EXIF orientation values) (only for type image)previews Object[] - specify an image srcset as an array of objects in the form { [mediawidth]: 'url' } (only for type image)hlsStartLevel number - define startLevel (size) of hls-videothumbnail string - url of a preview image, used for files for which no special viewer is available | array | - | [] |
| initialSlide | index of initial slide this NEEDS to be provided if carousel should start with any other than first image in items array | number|string | - | 0 |
| allowDownload | define if download button should be shown and download be enabled | boolean | - | true |
| infoTexts | define information texts e.g. for download and view (for pdfs) buttons or error messages | object | - | { download: 'Download', view: 'View', error: { pdf: 'The PDF couldn’t be opened in the PDF-Viewer.', } } |
| showPreview | steer the display of the lightbox | boolean | - | false |
| swiperOptions | specify swiper API options | object | - | { speed: 500, keyboard: { enabled: true, } } |
| pdfInitialWidth | define the initial width (in pixels) for pdf pages | number | - | 1000 |
| pdfZoomWidth | defines the width (in pixels) of PDF pages in zoom mode | number | - | 2500 |
| zoomMax | define the max zoom factor in % | number | - | 250 |
Events
| Event name | Properties | Description |
|---|---|---|
| download | url string - the download urlname string - the file name | download button clicked |
| hide | triggered by clicking on close button |