EverWeb Widgets

3-in-1 Slideshow

3 in 1 Slider

This versatile responsive slider can be set up in several ways …
  [1] A manual or autoplay slider with or without pager dots
  [2] A slideshow with thumbnail image carousel
  [3] Either of the above plus a lightbox slider which opens when any slide is clicked or tapped.
Images
The slideshow has responsive width and a maximum width setting. It has adaptive height so it can cope with images of varying aspect ratio although it is more efficient and professional looking when all the images are cropped to the same size.
To illustrate adaptive height, images 3 and 5 in the slider above have a different height to the rest of the images.
The images for the example on this page were made available in three different sizes …
Thumbnails - 200 x 125
Slideshow Images - 800 x 500
Lightbox Gallery - 1200 x 750
The main slideshow is created by selecting all the medium size images in the Finder folder, dragging them all together and dropping them onto the Assets List in the widget settings pannel.
Thumbnails are added by checking the appropriate box in the widget settings. selecting an image in the list and then using the "Thumbnail Image " button to select the small image.
If the box for selecting the "Lightbox Gallery" has been checked, use the "Gallery Image" button to select the largest version of the image.
Alt Text & Captions
These are added by selecting an image file in the list and entering the data in the boxes provided. The caption appears at the bottom of the slideshow image and the keywords entered into the alt text attribute appear as the lightbox slideshow image caption.

Resizing Images

Slideshow Settings

Te lightbox gallery's top control bar has a slide counter and controls for zooming in/out on the image, returning it to its default size, fullscreen mode, a play/pause button, a download link and a button for closing the gallery. The download link is optional and can be turned on/off in the widget settings.
The lightbox gallery grid can be turned off by the visitor if they want to magnify the images.
Thumbnails
There is a checkbox to show the thumbnails below the slider and to set the number of thumbnail images to show at any one time.
Pager
The pager is an alternative to the thumbnail grid. There are controls for setting the pager dot and active dot colors and the slideshow background color and its opacity.
Padding
When either the thumbnail carousel or the pager is selected, set the bottom padding to 10px. There are separate controls for adjusting the top and left/right padding.
Autoplay
There are checkboxes for turning on autoplay - with or without pause on hover - although this is not a good idea for a slider that will be displayed on a mobile phone.
The slide time and the transition time can be set in milliseconds.
Captions
There are controls for setting the caption font family, using a Google hosted font with a web safe fallback font, font size, color and for the caption background color and its opacity.

© EverWeb Widgets -