An interactive carousel of teasers to a series of pages from your site (for narrow columns).
Last reviewed: May 23, 2022
This component initially has two tabs: Carousel Module and Carousel Items. An additional tab appears after the Build list using option is chosen.
The title of each page, its descriptive text and its main photo are displayed on each slide. Clickable controls allow visitors to manually cycle through the display of pages.
These components are normally used as teasers to link to Shared Content pages built with the Highlight Template. When the linked module contains a YouTube video, it will be playable from the Carousel.
For best performance, please use this component with Shared Content pages created using the Highlight Template.
This component cannot be placed into a column control without using a shared content reference or modifying your site’s design.
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
Tip: To display images or teasers without deeper links, see the Advanced section on Displaying Just Images or Teasers.
Tip: To display working YouTube videos, see the Advanced section on Adding Playable Video.
Click the wrench icon to 'configure' these settings.
(This tab employs the standard List Builder Component settings.)
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.
> read more in this Known Issue: Do Not Link to a Child's Parent Page in a List
Do not link to DAM assets using a relative path (/content/dam/...). For these you must use a File Download component. > read more about this Known Issue: Having Trouble Linking Downloadable Files in the DAM
New window: Select so each clicked page is displayed in a new browser window.
'Open links in new window' and 'Display as: Full content' are incompatible and will disable each other when selected.
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, an 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.)
Display as: This drop-down menu asks how you would like your list to be displayed. Lists fall into the general categories of Links, Teasers and Content:
'Display as: Full content' and 'Open links in new window' are incompatible and will disable each other when selected.
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.
If you want all items to appear in the list, do not leave the Limit field blank. Instead, enter a value that you anticipate will meet your needs; for example, 200, 500, etc. (The News Center has used 9999 as a 'very large number' because their archives date to 1990.)
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.
How to Build a Carousel of Just Images or Teasers
There may be times when you want to build a slideshow but you don't want to link to anything. For example, you have a series of pictures of people making statements, with captions, but you do not have anything more to show about them. To accomplish this, use the Carousel to display a series of shared content pages built using the Highlight Template. If the Highlight Template is not provided with a link, the Carousel 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 Carousel.