The CarouselWidget is a slider component designed for displaying images and videos with navigation controls.
The component allows you to create a carousel with customizable navigation, supporting both images and embedded videos (e.g., YouTube).
Example Usage:
<ui-carousel-widget
class="v-col-md-6"
:srcs="[
['https://www.youtube.com/embed/IgYT5hi61KQ?si=snrhI0VbwC-Kiqic','video'],
['https://mlm-pro.ru/assets/cache_image/img/project5_400x260_78e.jpg'],
['https://mlm-pro.ru/assets/cache_image/img/project6_400x260_78e.jpg'],
['https://mlm-pro.ru/assets/cache_image/img/project4_400x260_78e.jpg']
]"
:urls="[
'',
'https://example.com/page1',
'https://example.com/page2',
''
]"
>
</ui-carousel-widget>
Configuration:
| Props | Default | Type | Description |
| :srcs | [['URL', 'type']] | Array | A 2D array of image and video URLs. For YouTube links, specify 'video' as the second element. |
| :urls | ['', 'URL', ...] | Array | An array of URLs for slide clicks. Must match the length of \:srcs. Empty strings mean no link for the corresponding slide. |
| :autoplay | "1" | String | Videos autoplay by default. |
| :mute | "1" | String | Videos are muted by default. Useful for setting the initial state of the sound button in the player. |
| :hide-delimiters | "false" | String | Navigation dots are hidden by default. |
| :interval | "8000" | String | Auto-slide interval is 8 seconds by default. |
| :show-arrows | "false" | String | Slider arrows are auto-hidden by default. |
| video-width | "100%" | String | Player width is 100% by default. |
| video-height | "100%" | String | Player height is 100% by default. |
Note: Autoplay with sound is restricted in browsers. See this link for details.
Note: All of the settings can be customized either from admin panel by manually editing code or from within the back office by pressing on a cog icon in a left upper corner of the page (only accessible when "Online office admin" flag is presented).