ThemeKit Snap Hero Images

Hero Scroll Snap

The scroll-snap-type property is part of the CSS Scroll Snap Module. It is a relatively new property and it can be seen in action above by gently swiping the trackpad or mouse top horizontally in the appropriate direction.
When viewed on a touch device like an iPad or iPhone it performs just like a swiper slider.
Slideshow Replacement?
Most slideshows are completely unsuitable for reaponsive page designs that will be viewed on mobile devices. The basic requirements are to lazy load the images to have smaller images for mobile users to decrease download time, to save battery power and reduce data download requirements.
The snap images are lazy loaded and a smaller image file is provided for mobile users.

Setup

Images
The images are inserted in two sizes - one for computers, laptops and tablets in landscape mode and the other for smaller mobile devices.
The large images in the example were reduced to 1200px x 800px before importing into EverWeb. The mobile version of the images should be reduced to about half that size.
Height
The widget has a contol for setting the fixed height of the image and a checkbox for setting it to fill the height of the screen when viewed on mobile phones in portrait mode.
Captions & Links
There are options for adding captions and CTA style hyperlinks The captions can use a Google hosted font with a web safe fallback if required and can be positioned top or bottom. The caption can be styled for font size, color and background color and its opacity.
The link is inserted in the center and can be positioned top, center or bottom. It has controls for font size, color, background color and opacity, hover color and border width, color and radius.
Chevrons
The captions have a chevron right icon to point to the next image. The last slide has a chevron left to indicate backward scrolling.
Scrollbar
Webkit browser - Chrome and Safari - allow styling of scroll bars using CSS, The widget has controls for the scrollbar height, color, track color and the border radius.