Hero Slider

The slideshow has a responsive width and a fixed height when viewed on computers. It switches to responsive width and height on mobile devices for a better viewing experience.
Slideshow
The slider can accomodate up tp 48 images and has options to show captions and to configure the images as hyperlinks. The captions have controls to adjust the background color and its opacity and the font size and color. The links can be configured to open in a new window if required.
The default transition is "fade" but there is a checkbox to change it to "slide". The transition time is set in milliseconds.
Although autoplay is not advisable for sliders that will be viewed on mobile devices this one can autoplay and stop at the last slide if required. The slide time is set in milliseconds.
Navigation is by directional arrows and these can be hidden if full autoplay is engaged. The arrows can be hidden on mobile devices where the visitor can swipe them.
Lazy Loading Images
The images should all be cropped to the same size and aspect ratio before importing into EverWeb. The images lazy load so that only the first, next and previous download with the page content. The remaining images download as required.
Text Overlay
The overlay has a heading and text and an optional link. It covers the left side of the image when viewed on computers. On mobile devices, the text positions itself below the slides.
There are controls for adjusting the vertical spacing of the items and for setting a maximum width for the text content on mobile devices.
The background color and its opacity can be adjusted and there are separate controls for setting the background, font and link colors for computer and for mobile.
The link has a double chevron by default. It is created using a CSS ::after pseudo element with the content as "\203A\203A" to create the chevrons. This can be changed to one chevron by deleting one instance of \203A or none by deleting both.