EverWeb Widgets HTML5

Adaptive Height Slider With Captions

Adaptive height Slideshow Caption Title Description Pager

Adaptive Height

Although slideshow images should ideally all be cropped to the same size, there are occasions where images of varying height need to be accommodated.
This slider shows all the images at the same width and the slider container adapts to the varying heights.
The slide captions are derived from the title attribute and there is also a box to add alt text. The captions can be dismissed by checking a box if not required.
The pager dots can be customized for color or can be hidden if they are not needed.

Widget Settings

The images can be inserted into the slider by dragging them into the Assets Column in EverWeb and selecting them one by one or by dragging them all together from a Finder folder onto the Assets List in the widget settings.
Highlight each image file name in turn and then enter a caption and alt text.
Enter the name of the desired font and check the box if it is Goole hosted.
Choose a suitable web safe fallback font.
Set the font size, color and background opacity for the image caption.
The slideshow description is not essential but it will contribute to the SEO for the images and create interrest for the visitors.
Enter the slideshow heading text and set its font size, color, background and text align.
Enter the descriptive text and set the font size, color and line height.
Choose the slide transition type and set the speed which is expressed in tenths of a second.
Uncheck either or both of the boxes if the captions and/or pager dots are not required.
To add a box shadow to the slideshow container, set its radius and color.
NOTE: Since the slider moves up and down with varying image height, it will at times cover any content below it. Therefore the slider should be selected and brought to the front using the Arrange menu before publishing the page.

  • Adaptive Height Slider
  • Captions Alt Text
  • Captions Hidden
  • Pager dot color shiw/hide
  • Slider title and description

Slideshow Title

This is the slideshow description. The title is an h1 heading and is enclosed, along with the description, in the same HTML5 element as the slideshow so that the search engine spiders will realise that they are related to the slideshow.

Get The Widget