Full Width Fixed Height Carousel
This full width, fixed height carousel can be used for product display.
Product images are usually shot on a background so the slider has the option of adding an inset border and a spacer.
The slides can be displayed manually or autoplay. There is a hover stop option when in autoplay.
The slides can have captions and be created as hyperlinks to open in a new window if required.
In this example, autoplay is turned but not pause on hover and the carousel has been fixed in positon so that the content layer slides up over it.
Lazy Loading On Demand
If more than a few images are loaded into the slider - and the images are high resolution - there is the option to turn on lazy loading. The type of lazy loading is "on demand" which allows the next slide to load before it comes into the viewport.
As always, the images should be cropped to the width and height that they will be displayed at before importing into EverWeb.
Check the Full width box in the Metrics inspector.
Choose the images or drag them altogether from a Finder folder and drop them onto the widget's Asset List.
Highlight each file name in turn to add alt text, caption, and URL if required. Check the box for any links which are required to open in a new window.
Check the lazy loading box if required
Set the transition speed in tenths of a second.
Check the "Swipe" box if the slider will be viewed on tablets in manual mode.
Check the box for autoplay and also the ones for pause on hover and to hide the directional arrows if required.
Set the caption font styles for font family, size and color.
Set the caption background color and adjust its opacity.
If a border and/or a spacer is r equired, set their width and color.
If the carousel is to remain in a fixed position while the rest of the contetnt scrolls, check the "Fixed Position" box in the Metrics inspector.
This widget is included in the Full Width widget pack.