EverWeb Widgets

Super Size Slider Info

The widget creates a full size slideshow which fills the browser window when viewed on computers and fills the screen when viewed on touch devices like the iPad and iPhone.
The slider can autoplay if required or be navigated manually using the optional previous/next arrows and/or the pager dots. If the page containing the slider is going to be viewed on a touch devices like an iPad, there is an option for swipe navigation.

Page Layout
The page layout settings are shown in the screenshot to the left. Click the image to launch the lightbox image showing the items inserted onto the design canvas in EverWeb.
The Super Size slider is inserted first and then other widgets can be added. The demo has the Transparent Header & Navigation widget and the Hero Heading.
After inserting the widget, the Full Width box in the Metrics inspector is checked and the widget set to a suitable height using a drag handle or the Metrics inspector. The actual height doesn't matter as the images will become full size when viewed in the browser.
Slideshow
The images are added in the usual way by selecting them individually or dragging them together from a Finder folder and dropping them onto the Assets List in the widget settings panel.
Select each image file name in turn to add the data. This is the image alt text and the caption. If hyperlinks have been added, enter the link text and URL.
Slideshow Options
There are checkboxes for showing the navigation arrows and the pager dots. The transition can be either fade or slide and the transition time is set in milliseconds.
Autoplay is implemented by setting a slide time in milliseconds. For manual play, this should be set to zero.
Captions
The captions can use a web safe font or a non web safe or Google hosted font with a web safe fallback. The captions can be styled for font size, color and the background color and its opacity. There are controls for adding a border and/or a box shadow.
The caption has a control for setting its distance from the top. This is a percentage value since the slider is responsive.
Link
The optional links can be turned on globally and inherit the caption font color. There are controls for the hover color, the border width and for setting the vertical spacing from the caption text.
Animation
The captions can be animated if required. There is drop down menu for selecting the animation type.
NOTE: If the slider is to be used on a page that will be viewed on a touch device like the iPad or iPhone, do NOT use any animations that enter from the top or right. Doing so will cause the page layout to distort on page load.
The animation has controls for setting both a delay before tha animation fires and the time taken for the animation to complete. Both of these values are in seconds.

© EverWeb Widgets -