EverWeb Widgets

Responsive Carousel

Carousel

The carousel can be full width or centered with a maximum width setting. The wrapper has controls for adjusting the background color and its opacity.
Images
A carousel is best for displaying images that have a low aspect ratio - square or portrait.
The images were cropped to 360px x 400px before importing in to EverWeb. The width was chosen to allow full quality when one slide only is display on phones.
The image horizontal spacing can be adjusted and the slider background has controls for color and opacity.
Navigation
Computer users can navigate the slides one by one using the directional arrows or grab and drag. The slides in view can all be changed at once using the optional pager.
Touch device users can navigate using the arrows if present or by swiping.
Navigation Arrows
The arrows have controls for adjusting the background color and its opacity, the icon color and the icon hover color and hover background.
Pager
The pager dots have controls for adjusting the sizing and space and for the dot color and active dot color.
Device Type Navigation
The media queries are comprehensive. The number of slides to show can be set for phone, tablet portrait, tablet landscape, computer and computer wide. Ther are controls to show or hide the navigation arrows and pager for each device.
Links
The slides can be configured as links to internal or external pages with the option to open in a new window if required.
Lazy Loading
The last control is for turning on the lazy loading function since this will cause the images to disappear from view on the EverWeb design canvas.
Lazy loading loads only the slides in view and the previous and next on page load. The rest are download as the carousel is navigated.