Skip to main content

Recruitment templates

Carousel templates

Carousels are a way of displaying full width images at the top of the page. They can contain a single feature image or multiple images  in a scrolling format. You can add short captions over each image with a link.

How to add to a webpage

  1. First, add the Carousel interface template as a piece of content on the page. This contains the code needed to position the carousel and make it work. We would suggest naming the content 'Carousel Interface' for easy reference. The carousel will not work without this template. You add your first carousel image to this template
  2. Use Carousel panel  templates to add additional images. You need one Carousel panel template per image.
  3. In T4 you should place the Carousel container and Carousel panel pieces of content above Page Structure V2 (to enable your Heading 1 to sit above the carousel) in T4.

Arrows appear on the images automatically if more than one carousel entry template is added

Arrows do not appear if only one carousel entry template is added. It is OK to have just one image in a carousel template, this will display as a static image

  • Images should be 930 x 500px
  • Images should be jpegs and loaded into the media library using the media type 'image'
  • Images should be high quality and processed from the original file for best quality, but exported for web at a reduced % (such as 60%) to ensure the file size is not too high
  • Images should be photographic. Logos are generally not suitable in large carousels and should be added to webpages using the Panel template. 
  • Carousels should have no more than four images. Users do not stay watching the carousel for more than a couple of images and each image adds to the page load time.
  • Captions should be entered into the 'caption' field in the Carousel entry template
  • There should be a unique caption per image
  • It is an optional field, so images don't have to have a caption. If no caption is entered, the translucent panel at the bottom of the image won't appear
  • Captions should be no more than one sentence and contain no more than 10 words (approximately) - preview (after approving the piece of content) to check that your caption fits on one line. Carousel image 02 demonstrates how an image looks in the carousel when the caption is longer than one line. The carousel template automatically fits it on two lines, but this may not be ideal as it's a lot of text for users to read on a moving piece of content, and the caption panel gets very deep and obscures a lot of the image.
  • You can add a link in the 'link' field in the Carousel entry template to allow a carousel image to link to a webpage.
  • Paste the weblink into the link field eg http://www.bbc.co.uk
  • The Carousel template automatically changes the mouse pointer to the hand symbol when users roll over the image if it has a hyperlink, so that users know it will go to another webpage when clicked.