ThemeKit Animated Hero

EZ Carousel

The carousel below has the opption to animate up and overlay the item above by a preset number of pixels.

Page Header

The page header was created using the ThemeKit Animated Hero, the Show/Hide Fade Nav and the EZ Carousel.
The hero was inserted first with the carousel set to animate up below it. The show/hide item with the logo, heading and navigation action tab was inserted below the ThemeKit Info Footer since it has a fixed position.

ThemeKit EZ Carousel

Multi Option Carousel

A carousel that shows more than one image at a time is a better option for responsive pages since the image sizes can be much smaller.
This carousel can show a different number of images for each device type - computer wide, computer, tablet landscape, tablet portrait and phone. The images don't need to be any wider than about 400px depending on the value set for the number of images shown.
Width
The carousel by default is centered with a maximum width setting. It can be made to fill the width of the browser/device window by checking a box.
Captions
The optional captions are centered over the bottom of the image and have controls for font family, fallback font, size color and for the background color and its opacity.
Arrows
The slides can be navigated using the directional arrows or grab and drag on computers and swipe on touch devices.
The arrows can be styled for color, background color and opacity, hover color and hover background.
Arrows can be turned on/off for each device type.
Pager
The optional pager has controls for dot size, round dots, dot spacing, color and active dot color.
The pager can be turned on/off for each device type.
Autoplay
Autoplay is not a desirable feature in any situation but should never be used for an item that is being displayed on battery driven tmobile devices.
The autoplay feature can be turned on for each device type and has controls for setting the slide time in milliseconds and for turning on the pause on hover function.
Links
The images can be configured as internal or external links and there is an option to open in a new window.
Lazy Loading
The images can be lazy loaded by checking a box and this function should be turned on if there are more than about 6 images.
Note that when the lazy load function is engaged some or all of the images may disappear from view on the EverWeb design canvas.

ThemeKit Animation