Carousel showcases pages from your site (horizontal navigation).
Last reviewed: March 30, 2022
There are two initial tabs: Slide Deck Items and Advanced. A third tab appears after the Build list using option is chosen.
This component can be used on almost any page, but is often used as a 'hero deck' or in conjunction with the Key Tasks component on home pages.
These components are normally used to display teasers that automatically link to shared content pages built with the Highlight Template. When this linked page contains a YouTube video, it will be playable directly from the slide deck.
The title of each page, its descriptive text and its main photo are displayed for each slide. As a full-sized Web page, clickable controls allow visitors to manually cycle through the display of pages, but on small screens, users can drag/swipe to change slides. The navigation controls are hidden if there is only one slide. Additional design elements are added as follows:
If you are considering linking to shared content stories from your home page, please read through Advanced: Best Practices for Use on a Home Page.
For best performance, please use this component with Shared Content pages created using the Highlight Template.
This component is intended to link to shared content hosted on another page. The linked content CANNOT be hosted on your home page. If you use the default hosting setting, the home page will simply refresh, and the linked content will not be displayed. > read more about use on a home page
Layout - Choose between:
The default size for this component is 402 x 287 pixels.
Here you will choose the type of list, as well as additional advanced settings.
Build list using: This drop-down menu asks how you want to build your list. You have the option to build it using:
Be careful not to list the parent page here by mistake.
> It can create a loop (Known Issue).
Host Page: (where applicable) Set the preferred page to display your list items. If blank, the current page will be used.
New window: Select so each clicked page is displayed in a new browser window.
When New Window is selected, an additional icon will follow the linked text, to alert visitors that they will be taken to a new browser window, or even leave the current website.
And if the hyperlink goes to a downloadable file, a document icon will instead be shown as well as the file size if the file is on the same server. (Read more about link labels.)
Order by: Here are some of the ways in which you can order your list. Not all appear in the dropdown. Others may be available on request -- contact the DCT Help Team for details.
Reverse order: Check the box to select whether you would like to inverse the order selected in the Order by field.
To engage it, choose Display as = "Full width hero" instead of 'Fit to column (default)'.
With the 'Hero' setting engaged, your component will now stretch to fill the entire screen width, maintaining its size ratio. With that engaged, you may now need to crop your content to look its best.
Because of its prominent placement and size, high quality images are needed, that further your strategic messaging and our UB brand, supported by regular evaluation and assessment.
Look below in See an Example.
Start at: Specify the first page to be listed, from the natural beginning of your list as defined by the other settings; e.g. 5 would be the 5th item.
Limit: Type the maximum number of Web pages that you would like to include in the list. If the field is left blank, the list will have no imposed boundaries and will encompass as many items as fit the parameters used to build the list.
Exclude current page: Filter out any items that would link to the same page on which the list is shown.
Enable Scheduling: Check the box to filter the list according to "Feature On/Off Time" that is set in Page Properties of listed pages.For more details, see “Enable Scheduling” in the List Builder component.
Host Page: Host shared content pages in this context. Leave blank for current page.
To avoid confusion, every unique link on a page must have unique link text. It is not hard to compose comprehensive text for manually coded links, but links that are generated automatically by lists and carousels must also be different, which takes more planning.
Also consider Call to Action, Button, and Tabs components, as well as the pagination and "see all" links in the Event and News List components which may have the same labels and appear more than once on a page. (Some of these have additional label settings that can help prevent this redundancy.)
Best practice: when creating shared content pages that will be used in lists, use distinct titles, or set the Navigation Title in the page Properties so none of your pages have the same title if they are displayed together. Also take advantage of additional label settings in other components when you will have several on a page.
Alternative text ('Alt text') is a best practice for all your UBCMS images and is often required for accessibility so screen readers can tell visually disabled users what they are not seeing.
Images displayed as teasers in lists require Alt text. Normally this is supplied in the original listed pages, often in shared content, and in some cases, in the metadata of the referenced images in Assets.
Best practice, Alt text should be added whenever an image is uploaded into Assets.
Link text should describe where the link will take the user in a manner that is appropriate to the context on your page and also the target page. This is also true for images that act as links.
Best practice: Avoid meaningless standalone phrases like "click here", "see all" and "learn more".
Links in many components can be set to open in a new browser window (or tab). The user can thus explore the new page, while preserving the source page (and your website) in the original tab. However, this can be confusing if the user does not realize a new tab has opened. They may become lost, confused how they arrived on that new page and unable to return to your site.
Best practice: let the user control their experience and stay in the same tab, with two notable exceptions:
The user should control carousels, slideshows and video, so they are not confused by unexpected behavior and to provide enough time for them to process each segment.
These recommendations are supported by default in UBCMS carousel, slideshow and video components. Please comply with this best practice if you embed external video or animations.
If you wish to deliver news stories and other mixed shared content content consistently and effectively through a home page slide deck, we recommend the following best practice steps.
How to build a Slide Deck of just images or teasers.
There may be times when you want to build a slideshow but you do not want to link to other pages. For example, you have a series of pictures of people making statements, with captions, but you do not have anything more to share about them.
To accomplish this, use the Slide Deck to display a series of shared content pages built using the Highlight Template. If the Highlight Template is not provided with a link, the Slide Deck teaser will not be linked either.
How to load a playable YouTube video.
This component is intended to be used with shared content pages built using the Highlight Template. This template comes with a preloaded flexible shared content module, which includes a video tab. Follow these steps to provide working videos in the slide deck.