EverWeb PhotoKit

Adaptive Height Slider

Image [1]
Image [1] 1200 x 720 - 54KB
Image [2]
Image [2] 800 x 800px - 184KB
Image [3]
Image [3] 800 x 1000px - 360KB
Image [4]
Image [4] 1200 x 720 - 244KB
Image [5]
Image [5] 1000 x 800 - 115KB
Image [6]
Image [6] 800 x 800px - 116KB

Adaptive Height Slider

An adaptive height slideshow is one that adjusts its container height to accomodate images with varying aspect ratio rather then forcing the image to fit a preset container. It does have certain advanyages for displaying images with varying aspect ratio but does cause problems for visitors viewing the slideshow on laptops, tablets and phones.
Viewport
To stop images with a portait aspect ratio from overflowing out of the viewport, a maximum width needs to be set for each device type.
Slider
The slideshow has maximum width settings for large screen, tablets and mobile phones. Images have an alt text attribute and a caption that sits below the image. The captions can use a Google hosted font with a web safe fallback and have controls for font size, color, background and for the caption area height.
The navigation is by directional arrows which can be hidden on touch devices or only appear on hover on computers and laptops.
The transition can be slide or fade and the transition time is set in milliseonds.
Wrapper
The wrapper has controls for setting its background color and opacity and a control to add top/bottom padding to space the slider away from the items above and below it.