Events carousel

Display a group of upcoming events categorised with the same local tag.

Events carousel example

Example of how an Events Carousel component looks on a desktop.
Example of an Events Carousel component on mobile.

When to use an events carousel

An events carousel can be used to display a group of upcoming events that have been tagged with the same local tag, for example ‘UG Open Days’. 

The events carousel component looks and behaves the same way as the related events carousel at the bottom of event pages – however, it can be added to any page and in any location.

This component is useful to feature on event landing pages or campaign pages to promote relevant, upcoming events to students and staff. For example, the Open Day campaign page has events carousels featuring upcoming undergraduate and postgraduate Open Days.

Key features and behaviour

  • The events carousel can pull through events using any tag, but the current use case for them is exclusively local tags.
  • This component is dynamic – meaning that once the events have passed, they will disappear from the events carousel component. Also, if there are no events left in the events carousel, the component will not display on the page.

How to use an Events Carousel

To use an events carousel, you must first create and tag the relevant events with the local tag you want to use, for example ‘Feel Good’.

Then, follow these steps:

  1. Locate the page where you want to add the events carousel.
  2. Give the events carousel an appropriate name, heading and description, for example 'BDAS events: View our upcoming BDAS events'.
  3. Select the local tag you want the events carousel to display.
  4. Add the events carousel to the page in Experience Editor and submit both component and page for approval. 

Notes on component use

  • The events carousel should only ever have one local tag applied to it, otherwise it will not display correctly.
  • The events carousel displays up to eight events, appearing in date order. If there are more than eight events, it is important to use the 'Events Carousel CTA' field so that users can click through to the filtered search results page to view all upcoming events. See the section on generating a local tag URL for more details.
  • The background colour of the events carousel can be changed (white, teal or grey) within the component properties in Experience Editor.

Generating a local tag URL

You can create a URL that links to the event diary search results filtered by a specific local tag. This URL can be used to populate the 'Events Carousel CTA' field in Sitecore so that users can click through to view all events tagged with the same local tag.

To create the URL, you will need to use a specific format, for example:

Please note: The local tag should be written exactly as it is in Sitecore, including spaces and capital letters, however, you should use a ‘+’ instead of a space if it is a multi-word phrase.

 

Screenshot in Sitecore showing how to fill in the Events Carousel CTA field.

The 'Event Carousel CTA' field in Sitecore.

Alternative uses

Sometimes, you may want to use a local tag URL instead of an events carousel component if the page isn't suitable. For example, the page layout might not lend itself to a carousel or the number of events could be unpredictable throughout the year. In this instance, you could add the local tag URL as a call-to-action button within another component such as a copy section, featured link or image copy section.