Parallax Slideshow
The full width slider has a height of 100 viewport units so that it fils the height of the browser or device window. The slidshow is navigated using directional arrows or grab and drag on computers and swipe on touch devices. The arrows can be hidden on mobile phones.
Images
Although the images are lazy loading their file size should be kept as small as possible. The images used in this demo were cropped to 1200 x 720px before importing into EverWeb.
Transition
The transition type can be slide or fade and the transition time is set in milliseconds.
Autoplay
Although autoplay should not be used on responsive pages, the slider has the option which requires the slide time to be entered in milliseconds. To overcome the problems and irritation of autoplay, the slider can be set to autoplay and stop at the last slide.
Parallax Effect
The parallax effect in this case is created by offsetting the slider on the Y-axis. The amount of offset is control by a slider which has appropriate maximum and minimum values.
Slider Height
When viewed on the design canvas, the slider will not appear full height since EverWeb cannot work with viewport units. The slider is given a minimum height of 600px so that the content is viewable for editing..
Captions
The optional captions are centered at the bottom of the image and there is a control to adjust its position on the Y-axis. The captions can use a Google hosted font if required with a web safe fallabck.
There are controls for font size, color, background color and its opacity and for the top/bottom and left/right padding.
Links
The images can be configured as links if required to open internal or external pages by entering a relative or an absolute file path. There is a checkbox for the new window option.
Follow the link below to find out more about file paths …