Heading

The slideshow was designed to replace other sliders that are not suitable for responsive pagges. A responsive slider needs to lazy load the images and insert a smaller image for mobile devices.
Images
The images used in this slider were resized to 1200 x 800px and 720 x 480px before importing into EverWeb. They are inserted using the HTML5 <picture> element so that the image can have an alt text attribute for the search engines and screen readers.
The slideshow can have a border to define or sharpen up the edges.
Captions
The optional captions are below the image in the control bar. They can be aligned center if the pager is not inserted or left if it is.
The slideshow images and the caption are inside an HTML5 <figure> element so that the caption text can be inserted in a <figcaption> which allows the search engines to associate the caption with the image.
Slideshow Options
When viewed on browser/device widths above the break point there are controls to show/hide navigation arrows, show/hide pager and transition time for the fade transition.
There is an autoplay option with controls for slide time in milliseconds and pause on hover. This option is NOT available on screen widths below the break point since autoplay should never be used for mobile devices.
Mobile Options
The dropdown for setting the break point is followed by a control for settimg the transition time for mobile since the transition is switched from fade on computers to slide/swipe below the break point.
A slide transition usually has a shorter transition time than a fade.
Links
The images can be configured as internal or external links if required and have a new window option.
Container
The slideshow is centered in the container with a maximum width setting. Horizontal and vertical spacing can be added when the offset box shadow option is used.