Using Carousel 2

by Jon Stahl — last modified May 20, 2011 09:19 PM
End-user documentation for Carousel 2

Introduction - What is Carousel?

Carousel lets you easily create elegant, javascript-animated "splash panels" in your pages.

Carousel uses jQuery javascript to automatically rotate among a set of images you upload to a special folder.  Images are captioned based on the Title and Description, and can be hyperlinked anyplace you choose.

You can configure a Carousel on any folder in your site.  Your Carousels will appear above the main body content.

Preparing your Carousel images

A Carousel consists of a set of images.  3-5 images typically looks best.  Before getting started, prepare your images using the photo editing software of your choice.

Take care to ensure that:

  • All your images are exactly the same dimensions. Carousel will not attempt to resize your images, and things will look very strange if your images have different dimensions.  The ideal size will depend on your page design, but we typically find that it's somewhere in the range of 400-500 pixels wide.
  • Your images are well compressed. A page with a Carousel will load multiple fairly-large images; if these images are not properly compressed, this can dramatically slow load times and increase your bandwidth usage.  Make sure you've applied sufficient compression to your images before uploading them.  We typically shoot for a maximum file size of about 50kb per image.


Installing Carousel

If you've not already installed Carousel, visit Site Setup > Add/Remove Products to install it.

 

Edit existing carousel images, text and links in the Carousel

Login to the website and use the Contents tab on to navigate to the Carousel Banners folder

Click the carousel banner entry you wish to edit, then click the edit tab:

The components you can edit are:

  1. The Title - this is the text link that renders under the the carousel.
  2. The URL - This is the web page that clicking the  carousel image points to.
  3. The image - The image that appears on the left side of the carousel.
  4. The Body - this is the text that renders to the right of the carousel image. use Heading (H2) style for the large textUse Normal Paragraph (p) for the rest of the text .

Add new carousel banners (image, text, link) in the carousel

Login to the website and use the Contents tab on to navigate to the Carousel Banners folder,and use the add new dropdown menu to add a Carousel banner. You can also add a new banner from the Carousel tab.

You will add the following components:

  1. The Title
  2. The URL
  3. The image
  4. The Body

Configuring the Carousel

The carousel is configured in the Carousel tab.

Elements of the Carousel configuration that you can change:

The dimensions of the carousel banner may or may not be determined by the styling of your website - check with Groundwire before changing these.

  1. Appearance tab: If you want to use page numbers or previous/next buttons rather than banner title for carousel navigation, you may choose those options from the pager type dropdown
  2. Transition tab: set the type and timing of the slide transition.
  3. Display tab: set the pages on which the carousel displays within the folder or temporarily supress the display of the carousel.