Viewport Height Slider
Although this slider can be set to fill the height of the browser/device window it can also be set to a fixed height in pixels.
Images
The images for a slider of this size need to be reasonably large to give decent quality and are really too big for a responsive page that will be viewed on tablets ad phones. To overcome this each image is inserted in two sizes using the HTML5 <picture> element. The ones used in this demo are 1200 x 800px (172KB) and 720 x 480px (72KB). Using the <picture> element rather than background images allows the use of the alt text attribute which is essential for SEO and screen readers.
Captions
The optional captions can be inserted more or less anywhere. They are positioned absolutely at the top or bottom and left or right and have controls for adjusting the distance on the X and Y-axis. They can also be centered at the top or bottom and have a maximum width control.
Links
The images can be configured as internal or external links if required and have a new window option.
Slideshow Options
When viewed on browser/device widths above the break point there are controls to show/hide navigation arrows, show/hide pager and transition time.
There is an autoplay option with controls for slide time in milliseconds and pause on hover. This option is NOT available on screen widths below the break point since autoplay should never be used for mobile devices.
Mobile Options
The dropdown for setting the break point is followed by a checkbox to switch the slider to responsive mode which gives a better viewing experience on small mobile devices. There are also controls for show/hide arrows and show/hide pager.
Navigation
The arrows have controls for setting their color and hover color. The pager has controls for dot size, spacing, color, active color, border width and color and a checkbox to make them round if required.
Animation
The slideshow can animate in on page load with any of the 15 different animations available in the ThemeKit Custom Stylesheet.