EverWeb PhotoKit

PhotoKit Pro Slider

PhotoKit Pro Slider

A slideshow suitable for responsive pages needs two important features - lazy loading images and having a the ability to insert a smaller image file for mobile device users. The home page of this section has instructions on how to quickly create smaller images using Preview.app.
Images
The images in the examples are inserted in two sizes. They were cropped to 1200px wide and 600px wide respectively before importing into EverWeb.
Navigation
There are options for previous/next tabs, pager dots and grab and drag for those viewing the page with a computer.
The pager dots and arrows can be hidden on mobile devices and the slides can be swiped.
Cursor
The cirsor can be the regular pointer, grab or ew-resize which indicates horizontal scroll.
Arrows
The previous/next tabs have controls for icon color, background color and opacity, hover color and hover background.
Pager
The pager appears below the slides and has controls for dot size and spacing and for dot color and active dot color.
Transitions
The transition can be slide or fade with the time set in milliseconds. Note that when the transitionis set to fade, mobile users will still have the ability to slide when swiping.
Captions
The optional captions can use a Google hosted or non web safe font with a web safe fallback if required. There are controls for font size, color and for the background color and its opacity.
The captions can be inserted at the top or bottom of the image and their distance on the Y-axis adjusted.
Links
The slides can be configured as internal or external liks which can open in a new window if required.
Lazy Loading
The last control in the widget settings turns on the lazy loading function. This is smart lazy loading so called because it downloads the slide in view and the previous and next slides at page load. The others are only downloaded when the visitor navigates through the slides.
NOTE:
At the time of writing, EverWeb (V3.1) doesn't display the images when viewed on the design canvas.