Documentation
Slideshow
Create a responsive slideshow with images and videos.
Animations
Viewport height
Check the viewport-height option to stretch the slideshow height to fill the whole viewport. You can set the min-height option to define a minimum height. The following example is set to 70% of the viewport height.
Ken Burns
Add Ken Burns effect with options for default, reverse, origin + center left and origin + center right.
Navigation dots
Videos
The slideshow is not restricted to images. Other stacks like the Video can be positioned in the background of each slide. Videos are muted, and play automatically. The video will pause whenever it's not visible, and resume once it becomes visible again.
Content parallax
Content overlay
Together the Position and Transition stacks are used to build a classic caption for the slideshow.
Tips for using the UIkit-3 Image on the Slideshow slots
- Set the option Set load target to slideshow
- Set the option Resize behaviour to Cover