Animated Layer Lazy Loading Hero Slider

The slideshow is full width, fixed height. Navigation is by directional arrows which can be hidden if autoplay is selected. The slider will swipe on mobile devices.
The slideshow can be set to autoplay and there are controls for setting the slide time and the transition time with a pause on hover option.

Content

The layer items are a caption, an icon and a link tab. These can be turned on or off globally.
The animation direction is set on a per slide basis while the animation time and position for each item is set globally.
The link tab can be configured to open an internal or external link in a new window if required.
The animation time for these items can be set individually so that they enter the viewport at different times.

Lazy Loading

The slider has a lazy loading feature which ensures that only the first three images are downloaded with page load. The rest are loaded when the visitor progresses through the slideshow. This means that a failrly large number of high resolution images can be used without effecting the page download time.

Viewport Height Option

The slider height is set by using a drag handle or the Metrics inspector to set the fixed height. There is an option to create a slider which fills the viewport of the browser or device screen. This simply requires checking a box and allows the slider to be used for a splash page with images and links to other pages.
In viewport height mode, a hero header widget with built navigation can be overlayed at the top if required.
Click HERE to open a demo in a new window. When viewing it with a computer, adjust the browser width and height to see how viewport height works.