Carousel Portlet Guide

The Carousel portlet allows you to create a rotating slideshow of images to display on a page. You can determine how big the images appear on the page, set captions for the images, determine how quickly the images rotate and more.

In order to make sure your images are all displayed with the same height and width, you will be prompted to crop each of your images to fit the portlet.

Adding a Carousel Portlet

The process for adding a Carousel portlet to a page is the same process as for adding any other portlet to a page.

Set Design Mode to On.

Find the region where you wish to display your tabs portlet. In the Portlet Library, click on the Basic category. Drag and drop the Carousel portlet on to the page.

Editing a Quick Links Portlet

To configure a Carousel portlet:

Set Design Mode to On.
Click the edit icon in the corner of the Carousel portlet.

Portlet Settings

The Settings button of the Carousel portlet is where you specify the size of the images being displayed as well as how those images are displayed.

The Banner Maximum Dimensions fields determine the largest size, in pixels, that the images will be displayed at.

Note: If you change these dimensions after you have already added images to your carousel, you will need to re-crop all the images that are currently being used on the portlet.

The Starting Image setting determines which image is displayed when the page first loads. You can either display the First image or Randomly select an image.

The Lazy Load setting allows you to load the carousel images as needed instead of loading them when the page first loads. Setting this to Enabled can help your page load more quickly, particularly if you have a lot of images in your portlet.

If Slideshow Mode is set to Enabled then the images will automatically rotate every X seconds.

If you are using Slideshow Mode, then you can also choose the Animation for the slideshow when moving from one image to the next. The images can be set to Slide or Fade when transitioning. The Slideshow Speed drop-down determines how many seconds there are between each rotation.

Once you have finished configuring the portlet, click Update to save your configuration.

Click Update again when you wish to save your changes to the portlet.

Style Options

With the style options, you can make some choices about the arrows that allow users to cycle between images. You also have the option of applying custom HTML to the captions used on the banner.

Arrows

You can choose which of two types of Arrows you wish to use with the banner by checking the appropriate box.
You can choose the Arrow Color and what the arrow looks like On Hover. For the Arrow Background you can specify the Background Color and what the arrow background looks like On Hover.
Clicking one of the four color boxes will bring up a color picker.
There are many ways to specify the color you wish to use.
Click one of the preset colors along the bottom of the picker.
Enter a color Hex code.
Enter RGB color values.
Use the two color sliders to adjust the color range and color brightness displayed.
Click within the visible color range to choose a specific color.
Click Update to save your arrow style choices.
Click Update again when you wish to save your changes to the portlet.

Note: Be sure that the color of the arrow and the color of the background (On hover and not) has sufficient contrast to be easily visible to users.

Banner Caption

If you want to change the styling of the Banner Caption, check the Enable custom caption HTML option.
You will then be able to enter in any custom HTML for the banner in the box below.
Click Update to save your custom HTML.
Click Update again when you wish to save your changes to the portlet.

Adding Images

To add images:

Click Add Image.
In the window that pops-up, navigate to and double-click on the image you wish to use.
On the right side of the modal, you will see the image you selected with a box highlighting the region that will be displayed on the carousel. The shape of this box will be determined by the width and height specified as the Banner Maximum Dimensions in the portlet settings.
To make the box larger or smaller, you can click outside the selection box and then click and drag to form a box of the size you want. When you expand or shrink the box, both the height and width of the box will automatically be adjusted to keep the ratio the same as with the settings in the Banner Maximum Dimensions. So, for example, if you set the Width to 1000 and the Height to 500, then the box will always be twice as wide as it is tall, no matter how small or large you make the box.
You can move the box around to determine what part of the image to use. To move the box, click and hold within the box and simply move the box wherever you wish.
On the left side of the image, you can specify an optional Title and Caption to display along the bottom of your image.
You are also able to specify a URL to associate with your image. If users click the image in the carousel, it will take them to this URL. Use the Action on Image Click field to determine if users will Open URL in current window or if they will Open URL in new window when they click the image.
For accessibility purposes, you must specify an Alt Text description of what the image is for users viewing the carousel with a screen reader.
Once you have finished configuring you image, click Add.
You can keep using the Add Image button to add as many images to the carousel as you wish to use.
Once you have added all the images, click Update to save.

Rearranging Images

To change the order your images are displayed:

Click on the rearrange icon to the left of the image and drag the image to your preferred location in the order.
To save your new order, click Update.

Updating Images

To change the properties for an image:

Click the pencil icon to the right of the image.
On the right side of the modal, you will see the image you selected with a box highlighting the region that will be displayed on the carousel. The shape of this box will be determined by the width and height specified as the Banner Maximum Dimensions in the portlet settings.
To make the box larger or smaller, you can click outside the selection box and then click and drag to form a box of the size you want. When you expand or shrink the box, both the height and width of the box will automatically be adjusted to keep the ratio the same as with the settings in the Banner Maximum Dimensions. So, for example, if you set the Width to 1000 and the Height to 500, then the box will always be twice as wide as it is tall, no matter how small or large you make the box.
You can move the box around to determine what part of the image to use. To move the box, click and hold within the box and simply drag the selection area wherever you wish.
On the left side of the image, you can specify an optional Title and Caption to display along the bottom of your image.
You are also able to specify a URL to associate with your image. If users click the image in the carousel, it will take them to this URL. Use the Action on Image Click field to determine if users will Open URL in current window or if they will Open URL in new window when they click the image.
For accessibility purposes, you must specify an Alt Text description of what the image is for users viewing the carousel with a screen reader.
To save your changes to the image, click Update.
To save your changes to the portlet, click Update again.

Deleting Images

To remove an image from the carousel:

Click the trash can icon and click OK.
To save your changes to the portlet, click Update.

Previewing Carousel

To preview your Carousel before making your changes live:

Click Preview.
The preview will work like the live portlet. You can use your arrows to navigate between the images. If the slideshow option was enabled, the images will also cycle automatically.
To end your preview, just click Preview again.