PhotoKit Vertical Slider
PhotoKit Vertical Slider
Vertical Pager
Vertical Pager
Fixed or Full Height
Fixed or Full Height
Separate Mobile Images
Separate Mobile Images
Captions & Links
Captions & Links
Optional Scroll Down
Optional Scroll Down

EverWeb PhotoKit

Vertical Slider

Vertical Scrolling

It could be argued that most slideshows are not very user friendly - esoecially to mobile device users - since most people are more used to vertical than horizontal scrolling. This slider will do both.
Slideshow
The images can be displayed at full width, fixed height or at viewport height to fill the browser or device window.
When set to full height there is an option to insert a scroll down function.
Images
Preparing the images for this slider is slightly different from the norm. To gice a better user experience for for mobile users using portrait mode, the smaller image files have been cropped to a different aspect ratio from the full size images.
The full size images are landscape and were crropped to 1200 x 800px before importing into EverWeb. The smaller images for mobile users are portrait and were cropped 600 x 750px and are about 1/3 of the full image size.
Navigation
Images are navigated using the vertical pager when viewed on computers and by swiping on touch devices.
Pager
The vertical page has controls for setting the dot size and spacing, color, hover color and active dot color.
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, center 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.
Scroll Down
The scroll down function should be used when the slideshow images are set to fill the viewport height otherwise mobile users will get stuck in the slider.
There are controls for icon color, hover color, background color and its opacity, position and distance on both the X-axis and the Y-axis, title on hover and scroll time in millisecobds.