Image Carousel

The carousel can hold up to 48 images of the same size and aspect ratio. The images are lazy loading and the overlay captions are optional.
The images can have a border and border radius if required and the distance between them is adjustable. The transition time is adjustable in milliseconds.
Pager
The pager dots are optional and have controls for adjusting the color, hover color and active color.
There are checkboxes to show/hide the pager for each device - computer, tablet landscape, tablet portrait and phone.
Navigation
The slides can be navigated using the pager if present or by swiping. There is an autoplay option which has controls for slide time and pause on hover.
Loop
The slides can loop continuously or play once and then stop so the carousel can autoplay on computers and only play once and stop when viewed on mobile devices to reduce power consumption.
Slides
The number of slides to show and slides to scroll can be set for each device type - computer, tablet landscape, tablet portrait and phone. The presets for slides to show are set at 4, 4, 3 and 2 and the slides to scroll values are all set at 1.
It's important to try out different values for the various devices and test the results in the iOS Simulator.
Image
The images should be cropped to the same size and aspect ratio before importing into EverWeb. Then they can be dragged all together from the Finder and dropped onto the Assets List in the widget settings panel.
The images in the example on this page are cropped to 400px square.
Captions
The optional captions can use a web safe font or a non web safe or Google hosted font with a web safe fallback. There are controls for font size, color and for the background color and its opacity.
Animation
The slide up animation uses keyframes to transition the carousel on the y-axis. The distance it travels is set in pixels and the animation time in seconds. The longer the distance and the shorter the time - the faster it slides.
Overlap
The overlapping effect is created using a negative top margin. This can be adjusted to get the desired amount.