Horizontal Snap Carousel

The ThemeKit M1 Snap Carousel uses the CSS scroll snapping. It doesn't require Javascript which makes it ideal for mobile devices.
Om computers the scroller will snap to the next image when the mouse or trackpad is brished lightly in a horizontal direction. On touch devices it swipes like any other slideshow.
Images
The images should be cropped to the actual size that they will appear on the page. The images in the demo are 400 x 320px and the file size is about 25KB.
Cursor
Since some computer users may be confused with this type of scroller there is an option to show the EW cursor on hover to indicate horizontal scrolling.
Captions
The captions overlay the image at the bottom and can be aligned left, center or right. There are controls for font family, fallback font, size, color and for the background color and its opacity.
Links
The images can be configured as links if required. When this is turned on a link icon appears at the top right.
Both the captions and links can appear on hover when viewed on computers.
Lazy Load
If more than a few images are inserted the lazy loading function should be turned on prior to publishing.

Show/Hide Navigation Toolbar

The ThemeKit M1 S/H Nav Bar was designed to be much more convenient for those using mobile devices who make up over 60% of a website's visitors.
The bar appears at the bottom of the browser/device window on page load. It disappears on scroll down and reappears when the bottom of the page is reached or if the content is scroll direction is reversed.
Icon Bar
The bar incorporates a centered three column grid layout which has a maximum width setting.
The default icon in the left column is for a link back to the home page. the center icon shows and hides the navigation overlay and the icon in the right column has a smooth scroll to the top function.
The icons share the same color and hover color and the bar has controls for the background color and its opacity.
Home Link
The icon can be changed to any of the hundreds available in the ThemeKit SVG icon folder. The icon file can be opened in TextEdit.app or a code editor in plain text mode by double clicking it. Copy the code and paste it into the box in the widget settings
Action Tab
The action tab is created using CSS so that it can change for three horizontal bars to a cross close icon after it is tapped to open the navigation.
Scroll Top
The scroll top icon is also an SVG and there is a control to adjust the scroll to the top time in milliseconds.

NOTE
The ThemeKit Info Footer used on this page has 40px of bottom padding added to allow for the height of the navigation toolbar.