EverWeb Widgetbox

Circular Carousel

Circular Carousel
Circular Carousel
Coverflow Carousel

3D Circle Carousel

This carousel is not for the faint hearted! Adjusting the slides to suit the number of images and the overall size requires four controls. The first two change the width and depth of the circle and the third and fourth are for X and Y offsets which change the circle's postion within the container.

The carousel requires a lot of code to create this effect - some of which my conflict with other items on the page. The example shown her is actually created on another page with no other content and displayed here using the iFrame widget.

The satellite page has no header or footer and its width and height are set to that of the carousel. The iframe is set to 20px more than the satellite page width and equal to the page height to avoid the appearance of scrollbars.

The images can have caption which are set at the top left or right. The caption background uses RGB color numbers so that the background opacity can adjusted. The opacity should be set to zero if no captions are required.

The carousel is navigated by clicking any slide on computers or tapping on tablets.

Due to the compexity, the carousel is not really suitable for use on the smart phone version of the site.

Widget Settings

The images are loaded in the usual way be either selecting them one by one from the EverWeb Assets List are dragging them en masse from a Finder folder onto the Assets List in the widget seetings panel.

Find out more about preparing the images and loading them.

Highlight each image file name in turn and enter alt text for SEO and a caption if required. If there are to be no captions, set the caption background opacity to zero.

Adjust the width and height of the carousel using the Metrics inspector.

Divide the width shown in the Metrics inspector by 2 and enter it into the "Half Width:" box.

Adjust the circle dimensions using the Width and Depth controls.

Center the oval in the frame using the vales for OffsetX and OffsetY.

Enter the number of the active slide which will appear on page load. Note that the first slide's number is zero.

Set the slide transition time in milliseconds.  

Set the carousel background color and box shadow color and radius if required.

Set the caption font family, size and color.

Enter the RGB color numbers for the caption background and set the opacity.

Choose the caption position.

If captions are not required, set the caption background opacity to zero.

Get The Widget