Do you have a group of images you want to display on a page in your Higher Logic Community? If so, be sure to leverage our Carousel widget.

This article describes how to:

• add the widget to a page in Page Designer, and then
• configure the widget on the community page.

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, such as your site's main Home page or a community Home page).
2. In the Admin Toolbar, click (or right click for a new tab) Edit Page.

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 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 a community site page, let's take a look at how to manage it in your community.

Navigate to the page on which you added the widget and click Add Carousel.

The Carousel Builder dialog displays.

Use the Builder and Settings tabs of the dialog to add images and manage the carousel's settings, as described in the sections that follow.

Add images

1. On the Builder tab, click + Add.

2. Click Upload Image.

You can upload an image file from a variety of sources, such as your hard drive, an external drive, and social-media sites. The supported file types are .jpg, .png, .gif, and .bmp.

NOTE: Refer to Image dimensions, below, for image-size information.

3. After selecting an image file, you can specify:

• a caption that will be superimposed over the image,
• alternate text/title (to display if the image does not), and
• a link 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 site.

4. Click:

• Save Slide to add the image and return to the Builder tab, or
• Save and Add Another Slide to add more images, or
• Cancel to exit without saving an image file.

Configure carousel settings

On the Settings tab, you can configure a number of settings for your Carousel. The configuration settings are grouped into several categories.

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. Indicators are the small circles that indicate how many images are in the Carousel, as well as which image is currently active. Use this category to tweak the location and appearance of these circles.
2. Slide ("image") Captions is where you manage the properties of any unique Caption text that you added when uploading (step 3 of Add images) or editing an image.
3. Slide ("image") Controls is where you manage the appearance of the arrow buttons that users click to progress through the Carousel images.

• Miscellaneous has a field in which you can specify a wrapper class (recommended for advanced users only) for the Carousel. You can also set how long, in seconds, each image displays before the Carousel advances to the next image.

When you have finished configuring the Carousel (images, properties, behavior, etc.), click Save to apply your changes.

Image dimensions

When uploading banner images for your carousel, keep these image dimensions in mind.

Full width banners

• Width - the image width must be 1920px.
• Height - the image height is flexible; 450px is recommended.

Centered carousels

• Width - the image width must be 1200px.
• Height - the image height is flexible; 250-300px is recommended.

Manage images

After 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. Images are immediately deleted without a confirmation prompt.