ThemeKit Pro Slider

Essential Features

When designing a site for a client, one of the most important factors is page download time. Pages MUST download in under 2 seconds and that means on mobile devices too.
To achieve this goal images must be inserted in two sizes - one for computers and another half that size for mobile devices. Ideally, they should also lazy load if there is more than two images on a page.
Slideshow
Sliders are the worst for slowing down pages and using up mobile users data limits and battery power. It should be obvious that a slideshow that will be viewed on mobile devices should NOT be set to autoplay!
There aren't too many slideshows around that can load different image sizes for desktop and mobile and lazy load the images. The ThemeKit Pro Slider has been specially developed for this purpose. The larger images are dragged from the Finder onto the Assets Liist in the widget settings and the smaller ones arre dragged ino the main Assets to be selected as required.
Lazy Load
The images are lazy loaded as required. The viewable image and its previous and next image are downloaded at page load and the rest download as the slideshow progrsses. This is the optimal setting for lazy loading in slidehows since it means that the next and previous image is always ready to view and the loading spinner will never be seen.

Slider Features

The slideshow is centered in the browser/device window and has a maximum width setting which should be set to the width of the larger image files.
Images
The large images should be cropped to the same width as the slideshow's maximum width setting - in this case 1200px - before importing into EverWeb. The mobile version of the images should be reduced to about half that size.
Captions & Links
There are options for adding captions and to configure the images as a 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.
Arrows
The arrows are optional since the slider can be navigated using grab abd drag or the pager dots on computers and swipe on touch devices. They can be turned off for smaller devices using the break point control.
There are controls setting the icon color, hover color, background color and its opacity and hover background.
Transitions
The default transition is slide since this is required for mobile users. The fade transition can be turned on by checking a box and setting the transition time in milliseconds. It is worth noting that, when the slider is set to fade using the arrows, it will revert to the slide transition when swiped on mobile devices but use the fade transition if the arrows or pager are available and used..
Pager
The optional pager has controls for the dot size, spacing, dot color and active dot color. Like the directional arrows it can be turned off for certain devices by setting the break point to the applicab;e value.
Break Point
The break point is the width of the browser or device window at which the arrows and/or pager disappear. The is achiexed using CSS media queries and the options available are for tablet in landscape. tablet in portrait, phone in landscape and phone in portrait mode.