Slider carousel

The slider carousel allows you to promote a key message at the top of your site or page.

​We have 2 options for how the slider is displayed:

Option 1 - Full-width carousel

Example of full-wdith slider carousel 

This option should be used for sites where the promotional message is key, and the rest of the content on the page is more of a secondary function. For example, the Library Service site needed to be very visually appealing and give a real flavour of the service.

The slider caption position should ideally be centre in the full-width carousel, but if the images used don't work with this, it is possible to use left or right for the slider caption position.

Option 2 - Content-width carousel


Use this option if the site is more task-focused or for a less visual service. For example, the school admissions site uses a content-width carousel to provide clear messages about upcoming application deadlines and allocation dates.

The slider caption position should be 'bottom' if this carousel is used.

Content considerations and how to configure the slider carousel

The carousel should be used for key messages only. Ideally they would have a call-to-action which links to a key task. Text in the carousel should be especially clear and concise and in all cases kept short enough to be displayed.

In all cases where there is more than one image in the carousel, the dots should be added for type of navigation (this enables a user on a mobile device to realise that there is more than one image) and the slide show transition should be fade.

Page titles and slider carousels

Never use the page title overlaying image option.

If you want to keep a page title in the page, make sure it displays beneath the slider carousel for full-width carousels and above the slider carousel for content-width carousels. You can remove the page title if it's not required (for example if the page title is the same as the section title) by ticking 'Hide page title' in the page admin section at the bottom of the page.