Hero Carousel

The full width, fixed height image carousel can be used for displaying products, restaurant menu items, news items or even used for a blog post list since the items can easily be rearranged by dragging then in the widget API Assets List.
As can be seen from the example, the images can have different aspect ratios and there are options for an overlay caption and/or description and an info link.
The slideshow can be navigated using the optional directional arrows or can be set to autoplay with variable slide and transition times.
Images
Although the images can vary in size and aspect ratio, they should be cropped to approximately the size they will appear at in the browser for maximum page download time efficiency.
Each image has a field for entering the width and height. This is required to enable the carousel script to calculate the aspect ratio. It is not necessary to enter the actual width and height. The aspect ration can be used instead. For example, if the image is 360px wide by 270 in height, the aspect ratio is 4:3 so the width can be entered as 4 and the height as 3.
Carousel
The carousel is made full width by checking the box in the Metrics inspector and its height can be adjusted using a drag handle or the Metrics inspector.
There are controls to show/hide the navigation arrows, setting the arrow background and its opacity, turning on autoplay and setting the slide and transition times in milliseconds.
The container has controls for background color, top/bottom padding, horizontal slide spacing and a top and/or bottom separator with variable width and color.
Info
The captions and/or the descriptions can be turned on globally and can use a web safe font or a non web safe or Google hosted font with web safe fallback. There are controls for adjusting both the caption and description font size and text align individualy. The caption background color and its opacity can also be adjusted.
The vertical spacing control adjusts the relative distance between the caption and the description when necessary and adds top padding to the description when the caption isn't used.
Info Links
When the info links are turned on they can be styled for background color and its opacity and font and hover colors.
Responsive
Although the carousel is responsive, it is not really suitable for use on the mobile version of the site and should be replaced by a simple swipe slider showing a single image.
When used on the full site, test it in the iOS Simulator or the browser's responsive mode to make sure the number of images shown on an iPad in portrait mode is acceptable. The tablet view can be adjusted by varying the height of the carousel.
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.