Info Section
The info section is centered and animates in and up.
The info link and the heading are optional.
Info Section Left
The info section is positioned left and animates in from the right.
The info section has a maximum width of 30%.
Info Section Right
The info section is positioned right and animates in from the left.
Text is entered as HTML using <br> to create returns.
Info Section Center
The info section is positioned in the center and animates down from the top.
The container has background transparency and a box shadow.
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 info layer has a heading, text and a link tab. Each item can be turned on/off globally. The link tab can be configured to open an internal or external link in a new window if required.
The animation direction and the final position are set on a per slide basis while the animation delay and duration times are set globally.
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.