EverWeb ThemeKit

Custom Slider

The slideshow has a lot of options. It can be a fized height hero slider or full height slider on browser/device screen widths above the break point with an option to switch to a responsive slider below the break point to give a better UX (user experience).
Images
The images are lazy loading and are inserted in two sizes - one for computers and a smaller one for mobile devices. The images used in the demo were sized to 1200 x 800px and 720 x 480px respectively before importing into EverWeb.
Controls
The slideshow has controls for large screen and separate controls for mobile devices. For browser widths above the break point there are controls to show/hide arrows, show hide/pager, transition time, autoplay, slide time and pause on hover. The transition is fade.
For browser widths below the break point there are controls to show/hide arrows, show hide pager and transition time. There is no autoplay option. The transition is slide for swiping.
Navigation
The navigation arrows have controls for adjusting the arrow color and its hover color. The arrows are at the bottom right to give a better user experience.
The pager dots have controls for size, spacing, color, active color, border width and color and a checkbox to make them round.
Captions
The captions can use a Google hosted font with a web safe fallback and have controls for font size, color, background color and its opacity, padding, text align, line height and maximum width.
The captions can be inserted anywhere using the controls to position them on the X and Y-axis. The distances are a percentage set using a slider.
There is a checkbox to align the caption horizontally in the center.
Links
The slides can be selected as links globally and can be configured to open internal or external pages and have a new window option,
Amimation
The slideshow can animate in on page load using a selection of custom animations, There are controls to turn on the animation, select the animation type and for the animation time and delay.