The slideshow has options for show/hide captions and to show a slide counter.
The transition time and the caption animation time are set in milliseconds.
The slider images are responsive up to the width of the image file and there are controls for adjusting the width and height ratios if images of varying aspect ratio are used.
An image album is a much better option for a responsive web page than either a slideshow or a gallery grid. It only requires one image to download with the rest of the page content.
The image used here is only 800px wide with a file size of about 75 KB and is a link to open a lightbox slideshow with larger images.
When the image is clicked or tapped, the current, previous and next images are downloaded into the slideshow. The rest are downloaded on demand as the visitor navigates through them.
The widget creates an image in an HTML5 figure element and a text block in an article element. Both items sit side by side on wider screens - each in a grid column. At the break point, the article element positions itself below the figure.
The figure element has a figcaption which can appear only on hover when viewed on computers and laptops. On click or tap, the lightbox slideshow opens. As can be seen from the above examples, the image can be placed to the left or right of the text.
The article element has a heading and text which can be vertically aligned using the CSS grid "vertical-align" property. The options are start, center or end to align it at the top, center and bottom.
Images
The image which appears on page load should be cropped to the maximum width that it will be displayed at - in this case 800px. The slideshow images will have a maximum width equal to the width of the image file. They should be cropped to this width before importing into EverWeb.
Navigation
The slides are navigated using directional arrows or grab and drag when viewed on computers. There is an option to hide the arrows on mobile devices where the slides can be swiped.
Testing
Test the slideshow in the iOS Simulator using an iPhone in both portrait and landscape mode to make sure the slideshow images have a suitable aspect ratio.
