Blog Card Slideshow

The slideshow has a full width, fixed height background with card style slides. The slides can be used as a different approach to blog navigation by making the slides links to the various posts.
The slideshow can have up to 48 images and these can be set to lazy load for better page download efficiency.
Background
The background image is inserted in three different sizes - one for each device type. The images used in this demo are 1600px, 1200px and 800px wide respectively.
The height of the background can be adjusted and it becomes 100vh on mobile phones to fill the screen.
Images
The slideshow can have up to 48 images. These should be resized to the maximum size that they will appear at before importing into EverWeb for best results.
Images with varying aspect ratio can be used. There is a setting for the slide maximum width and the slider background can be increased for portrait images.
Navigation
The slides can be navigated using the directional arrows or grab and drag on computers. The navigation arrows have are placed together at the bottom right for a better user experience on wide screens.
The directional arrows disappear when the page is viewed on tablets in portrait mode and mobile phones where the visitor can swipe through them.
Lazy Loading
When more than a few images are inserted in the slider, the lazy loading feature should be turned to so that the page download time is not adversely effected.
Transition The default transition is slide and there is an option to change this to fade. If autoplay must be used, a fade transition is much less annoying. The transition time is set in milliseconds.
Autoplay
Although autoplay should be avoid on responsive pages, sometimes a client will insist on it. The autoplay slide time is set in milliseconds and there is a checkbox to turn on the pause on hover option.
A button appears on hover pause to let the visitor know hat's happening. This inherits the slider font family and has controls for font size, color and the background color and its opacity.
Slide Info
Each slide is an HTML5 <article> element which contains the image, an h1 heading and a paragraph. There is an optional CTA style link which can be configured to open internal or external pages and in a new window if required.
This links allows the slider to be used as an illustrated navigation.
Click the links below to find out about using relative and absolute file paths to link to internal and external pages and how to test responsive pages using the iOS Simulator.