Hero Slider

A full width fixed height "hero" slideshow is not really an option for a responsive page. The image files too large for downloading on mobile devices using wireless networks and they usually require fairly large supporting scripts to function.
The PhotoKit Snap Hero widget overcomes all these disadvantages by displaying a smaller image file for mobile devices, lazy loading the images and using CSS snap rather than Javascript to slide the images.
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.
Images
In addition to lazy loading, the slider loads 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 optional captions can be placed at the top or bottom; hey have a chevron right icon to indicate the scroll direction. The last slide has the icon reversed.
Cursor
The cursor displayed when the page is viewed on a computer is "ew-resize" since this indicates a horizontal scroll direction..
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.
Links
The optional links are centered over the image. They can open internal or external pages and have a new window option.
Follow the link below to learn about using relative and absolute file paths to create internal and external links.