Stage Slider

The hero slider has three animated items - an ih1 heading, a text block with heading and a paragraph and an optional CTA (Call To Action) link.
Images
A full width or hero slideshow must load diffirent sizes of images for the various devices if it is to be suitable for responsive page designs.
The heri images in the example are 1200 x 800px, 720 x 480px and an image with an aspect ratio of 9:16 at 375 x 667 for mobile phones in portrait mode.
Animation
The widget uses a custom stylesheet to create the 15 different types of animation. Each item can have a different animation type, time and delay.
Animation type is applied on a per slide basis and the timing is global.
Navigation
The directional arrows are inserted at the bottom right for user convenience and can be hidden on mobile devices. The slide can also be navigated by grab and drag on computers and swipe of touch devices.
Pager
The optional pager has controls for color and active color and can also be hidden on mobile devices.
Note that both the arrows and the pager are hidden on phones in portrait mode by default.
Main Heading
The h1 heading has a control to vertical align it in row [1]. In this example it is aligned at the botom of the row to make room for the ThemeKit Gradient Header which was inserted below the slider on the EverWeb design canvas and set to overlay it at the top.