Lightweight Hero Slider

This Hero style (full width, fixed height) slideshow is extremely lightweight in that there are no external scripts to download and and the animation is created using CSS3 and a couple of lines of Javascript.
The slideshow has two sets of images - one for wider screens and a smaller version for mobile users. This avoids the problems associated with downloading large image files over wireless networks.
The slides have a fixed height which can be set for both computers and tablets and becomes 100vh on mobile phones to fill the height of the screen.
Autoplay
Autoplaying a slideshow is never a good idea anyway but is definitely not good for mobile phone users. This one has an option to pause on hover when viewed on computers. On mobile devices, the visitor can tap the slider to stop it when they have viewed the images or are being irritated and distracted by it. Pausing the slider reduces the drain on there device's battery.
The button that appears when the slider is hovered to pause it can be located anywere in relation to the top/bottom or left/right of the slider. In the example it is placed at the bottom out of the way of the overlay navigation. It can be styled for font size, color, background color and its opacity and border radius.
Overlay
The optional overlay has a heading and options for a text block and a link. The overlay is centered in the image and its position in relation to the top can be adjusted using a slider. Its background color and opacity can be adjsuted along with the padding and border radius. There is an adjustment for vertically spacing the heading, text and link.
The text can use a web safe font or a non websafe or Google hosted font with a web safe fallback. There are controls for font size, text align, color and line height.
The CTA style link tab can be configured to open internal or external pages and in a new window if required. It has controls for font size, color, hover color, background color and opacity and border radius.
Animation
There are controls for setting the slide time and the transition time in milliseconds. The slide transition time is also applied to the fade in CSS animation for to the text overlay.
Images
The main images in this example are 1200px x 750px. The images for loading on mobile devices were reduce to 800px x 500px.
Click the link below for more info about batch resizing. It's really quick and simple and will allow your images to download a lot faster in the browser.