• Full Width Thumbnail Carousel
  • Centered Image Caption
  • Animated Responsive Thumbnail Container
  • Show/Hide Thumbnails
  • Show/Hide Directional Arrows
  • Touch Control Option
  • Fade or Slide Transition
  • Adjustable Transition Time
  • Adjustable Animation Time
  • Adjustable Thumbnail Width & Height
  • Autoplay Option
  • Adjustable Autoplay Slide Time

Image Preparation

The thumbnail images are automatically generated from the full size images.
The full size images should all have the same height and be cropped to the maximum size that they will be shown at before importing into EverWeb.

Full Width Thumbnal Gallery Slider Widget
Full WidthThumbnail Slider

Full Width Responsive Thumbnail Gallery Slider

The slideshow full size image has a maximum width setting. This is used to stop the image getting too large at wide browser settings and from covering content below it.
The thumbnail gallery is reponsive and fills the full browser width if enough images are added.
The thumbnail container is animated when the browser width is adjusted and the animation time can be set.
There are options for show/hide the thumbs and navigation arrows and the slider can be set to autoplay.
On tablet devices, the arrows disappear and there is a control for turning on swipe navigation. On smart phones, the thumbnails disappear.
The captions are centered at the bottom of the large image and are derived from the alt text attribute.

Full Width Thumbnal Gallery Slider Widget

Widget Setup

Check the "Full width" box in the Metrics inspector and either choose the images or drag them in together from a Finder folder and drop them onto the Assets List in the widget settings panel.
Highlight each image file name in turn to add the caption.
The captions can be extended to two or more lines by using HTML5 line breaks <br> for returns.
Since they are derived from the alt text attribute, the captions should be descriptive of the image content for good search engine optimization.
Enter the required thumbnail width and height.
Set the slider background color and add as much top padding as required.
Set the caption font family, size, color and the caption background color and its opacity.
Adjust the caption position relative to the bottom of the image if required.

Slideshow Settings

Set the maximum image width.
Choose to show or hide the directional arrows, show or hide the thumbnails and to turn on swiping on touch devices.
Choose the transition type and set the transtion time in tenths of a second.
Set the thumbnail container animation time in tenths of a second.
For autoplay, check the box and set the slide time in seconds.

This widget is included in the Full Width widget pack.

EverWeb Widgets | Full Width