Do you have a group of images you want to display on a page in your Online Community? If so, be sure to leverage our Carousel widget. In this article, you'll learn how to add the widget to a page in our Page Designer, and then configure the widget on the front-end community page.

NOTE: Adding this widget is limited to Site and Super Admins.

Add Carousel widget  

1. Navigate to the page on your community site to which you want to add the widget (this can be any page, like your site's main Home page or a specific community's Home page).
2. Click edit this page in the Webmaster Links menu.

3. You're now editing the page in Page Designer. On the right side, in the Widget section, select Other from the Category menu.

TIP: You can also quickly find the widget by searching "carousel" in the search field to the right.

4. Drag and drop the Carousel widget onto to the canvas, in the desired location.

5. On the widget Properties tab, in the right-hand panel, make any updates needed. For example, you can change the widget's title (this is displayed on the front-end) and set its view permissions (see Manage Page and Content Access to learn more about these permissions).
6. Click Publish at the bottom right of the page to save your changes.

Manage your Carousel  

Now that you've added the widget to one of your community site pages, let's take a look at how to manage it on the front-end.

First, navigate to the page to which you added the widget. Click ADD CAROUSEL. The Carousel Builder dialog displays, where you can add images and manage the carousel's settings.

Add images

1. On the Builder tab, click + ADD.

2. Then, click UPLOAD IMAGE. You can upload a file from your computer, network, or one of the many third-party options, like Facebook, Google Photos, etc. Supported file types are .jpg, .png, .gif, and .bmp.
3. After selecting a file, you can configure some optional properties to the right: you can give it a caption, an alternate text/title (this text displays if the image does not), and even hyperlink the image so users are taken to another page or even external website when they click the image. When hyperlinking an image, a best practice is to check the Open in a new window box so users don't navigate away from your Higher Logic.
4. At this point, click SAVE SLIDE to add the image and return to the previous page in the Carousel Builder, or click SAVE AND ADD ANOTHER SLIDE to add additional images.

Configure carousel settings

On the Settings tab, you can configure a number of settings for your Carousel. These options are grouped in several tabs:

This article is not going to describe each option, as they are standard CSS settings. However, here's an overview of what each setting category controls in the widget:

1. The indicators are the little circles that indicate how many images are in the Carousel, as well as which image is currently active. Use the INDICATORS tab to tweak the location and visual appearance of these circles.
2. If desired, each image can have a unique text caption, which is added during the upload process or when editing an image. Use the SLIDE CAPTIONS tab to tweak the location and visual appearance of this text.
3. These slide control buttons allow users to manually progress/reverse the Carousel's images. Use the SLIDE CONTROLS tab to tweak the location and visual appearance of these arrow buttons.

The final tab, MISCELLANEOUS, enables you to wrap the carousel in a CSS class (only recommended for advanced users), and define the time, in seconds, between the cycle of images.

When finished configuring the widget, click SAVE at the bottom left to apply your changes.

Manage images  

Once you've uploaded images to your Carousel, they'll appear on the Builder tab, in the Carousel Builder dialog. 

• Drag and drop the directional arrow icons to re-arrange the order of the images. This allows you to control the sequence of images as they cycle.
• Click the pencil icons to edit your images; you can upload a different image and modify the image's properties (caption, alt / title text, and whether it's a hyperlinked image).
• Click a trashcan icon to remove an image from the Carousel. Note that no confirmation is prompted, and images are deleted immediately.