EverWeb Widgets

ThemeKit M1 Scroll Images 1 — Scroll Images

ThemeKit M1 Scroll Images — Manual Scrolling

ThemeKit M1 Scroll Images 3 — Custom Scrollbar

ThemeKit M1 Scroll Images 4 — Captions Below

ThemeKit M1 Scroll Images 5 — Optional Links

ThemeKit M1 Scroll Images 6 — Link Icons

Scroll Images

A scroller like this is very lightweight and can display a lot of images without effecting page download time.
The captions are centered below the images and a link icon appears at the top right when the images are configured as links. The icons can appear on hover when viewed on computers.
Image Size
The images are given a maximum width setting so the image file with should not exceed this value. The images in the demo are 400px wide with a file size of less than 30KB.
The images become 100vw (viewport width) when viewed on phones in portrait mode.
Lazy Loading
Any group, grid width images or a slider must have a lazy loading function to prevent excess page download time. In the case of this scroller only the first 3 or 4 images download with the page content.
Scrollbar
The horizontal scrollbar has controls for setting the scrollbar height and color when viewed in webkit browsers - Safari and Chrome.

Side Note

Popups appearing on page load after a delay can be really irritating and cause visitors to quickly lower their opionion of the website. A gentle slide in animation with a highly visible close button is a much better option for leading visitors to specific content such as newsletter/blog signup, free stuff, specia offers etc.
The Polite Note
The ThemeKit M1 Side Note slides in from the left at a fixed distance from the top of the browser/device window. It has a control for setting the z-index to bring it to the front of other items on the page.
The container has a maximum width setting and can have a two color background gradient with adjustable angle to add some class.
Content
The note has a paragraph for text and an optional CTA style link which can open an internal or external page. The link can be aligned left, center or right.
When viewed on mobile phones in landscape mode the maximum width is fixed at 300px.
Close Tab
The close tab has its own controls for the icon color and the background color and its opacity.
Animation
The translate animation has controls for the animation time and delay. Both are set in seconds. The clos animation is preset.

Get the free ThemeKit Phone Simulator for your EverWeb project …

See Now