Full Width & Full Height
Creating a slideshow that fills the viewport on page load requires a few tricks to overcome EverWeb's inability to recognise viewport unite and iOS's weird handling of 100vh (viewport height).
The ThemeKit Slider Viewport Height has options for both pager and action navigation and image links.
The images are inserted in three sizes - each one having an aspect ratio to suit the displaying device …
- Large image 1200 x 750px aspect ratio 16:10
- Medium Image - 640 x 720 aspect ratio 8:10
- Small image 378 x 630 aspect ratio 6:10
Controls
Both the action tabs and the pager each have the option to be shown both above and below a preselected breakpoint
The action tabs have controls for icon color and background color and its opacity.
The pager items can be square or round with controls for size, background color, active background, border width and color, item spacing and a checkbox to make them round.
Their position up from the bottom on the Y-axis can be adjusted.
Captions
The captions are center with a control to adjust their position in relation to the bottom so they can be above or below the pager when present.
They have controls for font size and line height, font size and line height on phones, color and for background color and its opacity.
As can be seen from the demo the captions can run to two or more lines and have a maximum width setting.
Links
The link icon appears at the top right and has controls for icon color and background color with opacity. Its position relative to the top and right can be adjusted. In the demo it is moved downwards to clear the overlay heading.