Slideshow Replacement

Slideshows are probably the main reason for responsive pages to have poor performance in the browser and, if set to autoplay, are a complete disaster!
CSS Scroll Snap
Scroll snapping is the act of adjusting the scroll offset of a scroll container to be at a preferred snap position once the scroll operation is finished.
Scroll snapping is used in this widget to allow visitors to scroll through the images by swiping across their magic mouse or trackpad. Those who don't this function can use the scrollbar.
On touch devices like the iPad and iPhone, the swiping action is very similar to swiping a slideshow.
Advantages
The obvious advantages are that no scripts need to be downloaded and it doesn't require jQuery or Javascript which makes it ideal for responsive pages.
Lazy Loading
The efficiency can be increased by checking a box to lazy load the images. These means that only the first two images need to be downloaded at page load and the rest will download as the visitor swipes through them.
Cursor
The cursor is "ew-resize" since this indicates a horizontal direction. It can be changed to the default cursor if required.
Images
In addition to lazy loading, there is a checkbox to turn on the function to load a smaller image file for mobile devices. This is pretty much essentail if you have more than one or two images on a page.
The images used here were reduced to 1200px and 600px respectively before importing into EverWeb.
Captions
The vertical captions can be placed at the top or bottom and left or right. They can use a non websafe or Google hosted font with a web safe fallback if required. The background has an opacity slider and there are controls for letter spacing and text transform to uppercase.
Scrollbar
When viewed in Webkit browsers like Google's Chrome and Apple's Safari, the scrollbar can be style for height, color, track color and border radius.