EverWeb WidgetsResponsive Media Slider
The responsive header has a full size background slideshow which can be set to a fixed height. There is the option to set a different height on mobile phones or both can be set to viewport height as can be seen on the next page.
Slideshow
The images are lazy loading and have alt text and an optional centered caption at the bottom which can be styled for font size, color and background color and its opacity.
The directional arrows can be hidden when in auto mode and/or when the slider is viewed on mobile phones to be replaced by swiping.
The transition can be either fade or slide and there is a control for setting the transition time in milliseconds.
Images
The images for this type of slideshow need to be fairly large so it is essential to prevent them all downloading at page load. This is achieved by lazy loading them "on demand".
Auto Play/Stop
Autoplay sliders are not a good idea at the best of times and certaily not on a page which will be viewed on mobile devices.
The slideshow can autoplay if absolutely necessary and, in this case, the slide time is set in milliseconds.
When a client demands autoplay, there is an optiona to autoplay through the slides and stop on the last one. In this case, the image sizes should be kept as small as possible and the number of slides kept to a minimum.
Once the slider has stopped, the visitor can navigate back through the slides using the directional arrows or by swiping.
Header
The overlay header has an h1 heading and an optional logo and has adjustable height. The heading can use a web safe font or a non web safe or Google hosted font with a web safe fallback. It can be adjusted for font size, color, style and weight and letter spacing. The background color has an opacity slider.
Logo
The optional logo is positioned top left and has controls for adjusting its size and its position relative to the top and left.