Usage

The homepage carousel is unique to the University homepage. It is used to promote key messages.

As a guideline, the copy in the right-hand and bottom panels should be kept to a handful of short words to avoid wrapping issues at smaller screen widths.

Each image in the carousel has a title and alt tag.

The title tag must carry the title and credit for the image (if it has one), for example "Particle or wave... Credit: Jurvetson from Flickr".

The alt tag is useful to users who can't view images, and by browsers which don't render images. Use the alt tag if the image is necessary to understanding the meaning of the link/carousel item.

---

Interaction

Both the image and the strapline are clickable. By default, the carousel should cycle through the panels every five seconds. If the user interacts with the carousel, the auto-cycle is disabled until the page is reloaded. The left and right arrows cycle between panels.

---

CSS and media queries

Separate desktop and mobile views are created by using a 767px max-width media query to present a different structure.

---

Use of Javascript

The caption and carousel text are both truncated using Modernizr to detect media query detection of 1024px max-width to prevent them wrapping and overlapping other elements.

The carousel Javascript must be included in the page. The carousel Javascript dynamically appends navigation buttons and numbered indicator to describe the current slide and total slides available.

The carousel is set to autoplay using a Javascript timeout.

Javascript is also used to calculate the height of the carousel and create full height buttons to increase the hit area for mobile users.

---

Component variants

N/a