Carousel Component

An interactive carousel of teasers to a series of pages from your site (for narrow columns).

On this page:

Last reviewed: May 23, 2022

Accessibility
  • List Teaser images require Alt text.
  • Link text should be meaningful.
  • Use 'Open in New Window' sparingly.
  • Let users control animations.

> Read more about making this component accessible.

Using This Component

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. 

Works Best with Highlight Template

For best performance, please use this component with Shared Content pages created using the Highlight Template.

Be Careful When Placing in Column Control

This component cannot be placed into a column control without using a shared content reference or modifying your site’s design.

Be Careful With the 'host page' Setting

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.

Technical Restrictions

  1. This component is only intended for use in the right sidebar and on some homepages, where the width is no more than three columns. In a wider setting, the Carousel may not display well.
  2. Unlike the Full Width Carousel component, only one teaser (with the webpage’s title, main image and introductory text) is displayed at a time.
  3. This component cannot be placed into a column control without using a shared content reference or modifying your site’s design.
  4. For best performance, please use this component with Shared Content pages created using the Highlight Template.
  5. 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

Configure - Main Settings

Click the wrench icon to 'configure' these settings.

Carousel Module Tab

  • Title: Your descriptive title will be shown in all CAPS on the page.
  • Show "See All" button: Check the box if you would like to provide your visitors with a button that takes them to a webpage which displays all items in the Carousel simultaneously.
  • "See All" button text: If you decide to add a button, enter the buttn's label here.
  • Full list page: Select a URL to which your title and button will link.

(This tab employs the standard List Builder Component settings.)

Accessibility Concerns

See an Example

Was This Information Helpful?

(Required)
(Required)
(so we can thank you or request more details)
(Required)
(buffalo.edu addresses only please)
(Required)