EverWeb Widgets

Analogue Delay

Analogue Delay

Echolizer

Echolizer

blues drive

Blues Drive

boost

Boost

micro wah

Micro Wah

phaser

Phaser

rumble

Rumble

blues mood

Blues Mood

Hero Scroller

The full width, fixed height image scroller can be used for displaying products. Each image has a caption and is configured as a hyperlink.
The scroller can run continuously with pause on hover or slide and pause for a predetermined time. The number of images to scroll can also be set.
In this example, the slide time is set to 1000ms, the pause time to 2000ms and the items to scroll is set to 1 since it is responsive down to the width of the smallest iPhone in portrait mode.
Images
All the images should be the same height and width and they should be cropped to the actual size that they will appear on the web page for the best download time in the browser.
There is a field for entering the slide width and the height is set by adjusting the widget height using a drag handle or the Metrics inspector.
Styles
As can be seen from the example, the slides can have a vertical separator with a contrasting color and also a top and bottom horizontal separator if required.
Captions
The captions are centered and their distance up from the bottom is adjustable to allow for the bottom separator if used. They can use a web safe font or a non web safe or Google hosted font with a web safe fallback. The caption background has adjustable opacity.
Responsive
The scroller can be used on responsive pages when combined with a suitable header/navigation widget and a responsive content widget like the one used here.
For the scroller to display properly right down to the width of the smallest iPhone in portrait mode, the slide width should be reduced to 320px or less.
If the scroller is being used on a page which is designed as a full site page responsive down to the width of an iPad in portrait mode, the proposed slide width should be tested in that device or in the iOS Simulator app. See the page about Testing for more info.

© EverWeb Widgets -