Hero Pager Slider

The widget inserts a full with, fixed height slideshow with a pager and/or directional arrows. The control section is below the images so that they are not obstructed and the "Previous" and "Next" arrows are placed together to make it easier to navigate through the slides.
The slides can have an optional transparent overlay which disappears on hover when viewed on computers.
Sliders can be stacked or used in conjunction with suitable header/navigation and responsive container widgets to create a fully responsive page.
Images
The images should have a high aspect ratio and have sufficient quality when viewed on wide screens. The size of the images used in the demo is 1600px wide by 600px in height. In general, the image file size should be kept as low as possible without compromising quality too much.
Slider Options
There are checkboxes for turning on the pager and the navigation arrows individually.
The "start" slide number can be specified. In this example there are five images and the slideshow shows the center one on page load. Note that, when choosing a start slide, the first slide is 0, the second is 1 and so on …
Autoplay
When the box is checked for autoplay, the slide time and the transition time can be set in milliseconds.
Controls
The slideshow background color setting is inherted by the control area. As with all slideshows, the background is best set to black to avoid the dreaded "white flash" when the images load.
Pager
The pager dots are centered in the control area and can be styled for color, border color and active dot color. The dot spacing can be adjusted if required.
Navigation
The navigation arrows are situated at the bottom right for convenience and are large enough for fingertips when the page is viewed on a touch device like an iPad.
The arrows can be styled for color, background color, hover color and hover background color.
Transparent Overlay
The optional overlay has controls for overlay color and opacity. The overlay becomes completely transparent on hover.