Styled Image Captions
Optional Image Hyperlinks
Lazy Loading Slides
Heading & Text Description
Lazy Loading Image Slider
The slideshow is responsive from the maximum width setting down to the content width set in EverWeb. If this is set to 320px, the slideshow will be responsive down to the smallest size of iPhone.
If viewing this page on a computer, reduce the browser width to see the responsive action or use the browser's responsive mode. Also note how the slides can be navigated by holding down the mouse and dragging.
The images have captions and alt text and they can be configured as hyperlinks globally by checking a box and entering a URL.
There is an optional heading and text block for adding a title and description of the slideshow for the visitors and the search engines. This can be placed either above or below the slideshow.
The optional footer has auto update of the copyright year and an optional smooth scroll to the top chevron to allow the creation of a fully responsive page when combined with a suitable header/navigation widget and/or any of the HERO widgets.
In normal circumstances, website slideshows should be restricted to about a dozen images - especially if the image file size is large or the page will be viewed on a touch device like an iPad or iPhone - since all the image files need to download along with the rest of the page content. This slideshow avoids the issue by having an option for "on demand" lazy loading.
When lazy loading is turned on, only the first slide downloads with the rest of the content allowing a much faster page download time. Subsequent images are only downloaded when the visitor clicks the arrow or swipes/drags the slide to view the next or previous one.
Manual or Auto
In manual mode when viewed on a computer, the slides can be changed using the directional arrows or grab and drag. When the page is viewed on a mobile device, the arrows disappear and the slides are swiped.
In autoplay, the slide time can be set in milliseconds and there is also a control for turning on pause on hover.