Hero Layer Slider

The slideshow is full width, fixed height responsive with animated layers for a caption and an info link tab.
Images
The images need to be fairly large so that the quality is good since it is full width. The images used in this demo are 1920 x 775 px. The number of images needs to be kept low due the size of the image files or the page download time will suffer.
Slider Options
The slideshow can be navigated using arrows which appear on hover or grab and drag on computers and by swiping on touch devices. They can also be navigated using the optional pager dots.
There are checkboxes to show the arrows and pager and to turn on the full screen function. Note that the hyperlinks obviously won't work in full screen mode.
There are options for autoplay, pause on hover and slide and transition times. Note that autoplay is more likely to irritate visitors than entertain them and should never be used if the page is going to be downloaded on a mobile device like an iPad or iPhone.
Pager
The pager dots can be styled for size, color, border color, active color and horizontal spacing.
When the pager is added to the bottom of the slideshow stage, a background color can be applied and there are also controls for adding a bottom border.
Animated Heading & Link Tab
These items can be styled with a border and a variable opacity background. The animation delay time and the final position need to be set for each item in very slide.
The time is set in milliseconds and the positions are relative to the top and left of the browser or device window. The values for position are expressed as a percentage since the item is responsive.
Parallax Effect
The banner has an optional parallax effect which requires checking a box and setting the "Scroll Ratio". This allows the content below to scroll over the slider at a different speed from that of the slider.
The lower the value for ratio - the slower the speed of the slide over layer.
See THIS page for how this works with a slide over transparent layer.